Education
 

Help:Googlemaps

From WikiJET, the interactive website for the JET Programme

Please note: This new feature is still a little buggy. If you have problems please leave a message on Bobo12345's talk page.

Google maps can be a useful way to enhance your article

Google maps can be formatted in two ways:

  1. The code can be entered using the "edit map" shown on the edit pages. This is more of a "point and click" method, and allows you search arround the map for the view you want.
  2. The code can be entered directly. This is useful if you are comfortable with the wikimarkup and know the coordinates of the places you want to map.

[edit] Using the editor's map

If you are not comfortable with the code above, or don't know the coordinates for the places you want to map, you can use the editor's map.

The editor's map is found on the edit page, and turned on by clicking the "show map" link above the edit box.

Once visible, the map can be moved to show the correct area by using the controls on the top right, or by clicking and dragging. The slider on the right can be used to zoom in.

To add the map:

  1. Ensure that your cursor is in the edit box at the point you want the map added.
  2. Move the editor's map until you can see the area you wish to map. Choose the center point of your map by double clicking on that point.
  3. Add a placemark at the center, by clicking your chosen center point once.
  4. Click the placemark once, to show the label. This shows two links "insert map centered here " and "add point here "
  5. Click "insert map centered here " to add the main code to the edit box.

To add placemarks

  1. Ensure that your cursor is in the edit box 'between the two <googlemap> tags:
<googlemap ... >
 |
</googlemap>
  1. Move the editor's map until you can see the place you want to tag. Add a placemark there, by clicking the point once.
  2. Click the placemark once, to show the label. This shows two links "insert map centered here " and "add point here "
  3. Click "add point here " to add the main code to the edit box.
  4. The coordinates will be added to the edit box, and "label goes here" will be added after the coordinates. This can be changed to the text of your choice.

More placemarks can be added in the same way. Note that the placemarks will not stay on the edit map, only one pin is shown at any time. But all placemarks that you have added in this way will show when the map is saved.

Warning: Using preview closes the editor's map, and shows a preview of the map you have created. This map can't be used to add points; click "show map" again to show the editor's map. Although you can move the preview map, you can't add placemarks. And the editor's map will only show one placemark at a time.

[edit] To add the code directly

Google maps start with the code <googlemap> and end with </googlemap>

The main coordinates are the center of the map. For example, to center a map on Berlin, you would take the coordinates latitude 52.523777, longitude 13.411896.

So the basic code would be:

<googlemap lat="52.523777" lon="13.411896">
 
</googlemap>

Any coordinates for placemarks on this map, need to go between the two basic start and end tags. So for example, the Kaiser Wilhelm Memorial Church is at latitude 52.499683, longitude 13.333907. Giving the code:

<googlemap lat="52.523777" lon="13.411896">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
</googlemap>

The text after the longitude becomes the placemark label. Wikilinks can be used here if you wish.

More placemarks can be added between the tags, each on it's own line:

<googlemap lat="52.523777" lon="13.411896">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
52.510019,13.369893,Berlin Philharmonie
</googlemap>

The default zoom is too far out, so this can be adjusted within the first tag:

<googlemap lat="52.523777" lon="13.411896" zoom="12">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
52.510019,13.369893,Berlin Philharmonie
</googlemap>

0 is the furthest away, 17 is the closest in.

Other aspects that can be adjusted in the same way are:

  • width (in pixels; default is 740)
  • height (in pixels; default is 600)
  • type ("normal"/"map", "hybrid", or "satellite"; default is "hybrid")
  • controls ("small", "medium" or "large")
  • selector (show the map/hybrid/satellite selector? "yes" or "no"; default is "yes".)
  • scale (show the distance scale? "yes" or "no"; default is "no".)
  • units ("meters" or "miles"; default is "meters".)

So the final code might be:

<googlemap lat="52.523777" lon="13.411896" zoom="12" width="500" height="400" type="map" controls="small">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
52.510019,13.369893,Berlin Philharmonie
</googlemap>

Which gives us the map:

The easiest way to find coordinates is using a geocoder such as http://www.infosports.com/m/map.htm . Other resources can be found by searching for "free geocode" on Google or another search engine.

[edit] Troubleshooting

  • If you've entered the code correctly and all you are seeing in the map box is grey, check that you haven't got the longitude and latitude the wrong way round!
  • There are some problems with the Googlemaps extention and server caching. If you're having problems try purging the cache. You can do this by visiting the following URL, where PAGETITLE is the article name:
http://jet.wikia.com/index.php?title=PAGETITLE&action=purge
This extension is not normally active, but may be available on request.

Contents

Google maps can be embedded in the pages of any Wikia where the Googlemaps extension has been enabled. If you have a use for maps on your local wiki, please contact us so we can enable them for you.

Google maps can be formatted in two ways:

  1. The code can be entered using the "edit map" shown on the edit pages. This is more of a "point and click" method, and allows you search the map for the view you want.
  2. The code can be entered directly. This is useful if you are comfortable with wikimarkup and know the coordinates of the places you want to map.

How do I use the editor's map?

If you are not comfortable with the code below, or don't know the coordinates for the places you want to map, you can use the editor's map. This is found on the edit page, and turned on by clicking the map button (button_map_close.gif) above the edit box.

Once visible, the map can be moved to show the correct area by using the controls on the top right, or by clicking and dragging. The slider on the right can be used to zoom in.

To add the map:

  1. Ensure that your cursor is in the edit box at the point you want the map added.
  2. Move the editor's map until you can see the area you wish to map.
  3. To add a placemark, clicking your chosen point. Add a caption, and then click "save & close" to close the bubble.
  4. Other options can be changed by clicking the options below the map.
  5. Finally, copy the code in the grey box below the map, and paste it into the edit box below.

Warning: If you save or preview before copying the code into the edit box, you will lose your map.

Using preview closes the editor's map, and shows a preview of the map you have created. This map can't be used to add points; click "show map" again to show the editor's map. Although you can move the preview map, you can't add placemarks.

How do I add the code directly?

Google maps can be a useful way to enhance your article

Google maps start with the code <googlemap> and end with </googlemap>

The main coordinates are the center of the map. For example, to center a map on Berlin, you would take the coordinates latitude 52.523777, longitude 13.411896.

So the basic code would be:

<googlemap lat="52.523777" lon="13.411896">

</googlemap>

Any coordinates for placemarks on this map need to go between the two basic start and end tags, in the format "latitude,longitude,label". So for example, the Kaiser Wilhelm Memorial Church is at latitude 52.499683, longitude 13.333907. Giving the code:

<googlemap lat="52.523777" lon="13.411896">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
</googlemap>

The text after the longitude becomes the placemark label. Wikilinks can be used here if you wish.

More placemarks can be added between the tags, each on its own line:

<googlemap lat="52.523777" lon="13.411896">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
52.510019,13.369893,Berlin Philharmonie
</googlemap>

The default zoom is too far out, so this can be adjusted within the first tag:

<googlemap lat="52.523777" lon="13.411896" zoom="12">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
52.510019,13.369893,Berlin Philharmonie
</googlemap>

0 is the furthest away, 21 is the closest in.

Other aspects that can be adjusted in the same way are:

  • width (in pixels; default is 740)
  • height (in pixels; default is 600)
  • type ("normal"/"map", "hybrid", or "satellite"; default is "hybrid")
  • controls ("small", "medium" or "large")
  • selector (show the map/hybrid/satellite selector? "yes" or "no"; default is "yes".)
  • scale (show the distance scale? "yes" or "no"; default is "no".)
  • units ("meters" or "miles"; default is "meters".)

So the final code might be:

<googlemap lat="52.523777" lon="13.411896" zoom="12" width="500" height="400" type="map" controls="small">
52.499683,13.333907,Kaiser Wilhelm Memorial Church
52.510019,13.369893,Berlin Philharmonie
</googlemap>

The easiest way to find coordinates is using a geocoder such as http://www.infosports.com/m/map.htm . Other resources can be found by searching for "free geocode" on Google or another search engine. Alternatively, go to Google Maps, find the location you wish to map, move the map very slightly and click "link to this page". The "ll" value in the resulting URL contains the geocode.

Why is the map box grey?

If you've entered the code correctly and all you are seeing in the map box is grey, check that you haven't got the longitude and latitude the wrong way round!

Syntax list

Tag Attributes

This extension defines a <googlemap> tag. Legal attributes are:

  • width (in pixels)
  • height (in pixels)
  • lat (the center latitude on the map, defaults to my old dorm room :-)
  • lon (the center longitude on the map)
  • zoom (the zoom level; 0 is the furthest away, 17 is the closest in)
  • type (legal values are normal (or, equivalently, map), hybrid, and satellite; defaults to hybrid)
  • controls (small creates +/- zoom buttons, medium has zoom buttons and pan buttons, large has pan buttons with a sliding scale for zoom, and none has no buttons)
  • selector (show the map/hybrid/satellite selector? Legal values are yes (default) and no.)
  • scale (show the distance scale? Legal values are yes and no (default).)
  • overview (show the inset navigation map? Legal values are yes and no (default).)
  • icons (URL template for custom markers, with "{label}" where the name of the icon will be inserted; defaults to "http://maps.google.com/mapfiles/marker{label}.png")
  • icon (URL for markers without an icon specified; defaults to http://maps.google.com/mapfiles/marker.png)

All attributes are optional.

Markers

In the content of the tag, you can define one marker per line. Each line may or may not start with an icon name in parentheses; unless you set the "icons" attribute, legal icon names are the upper-case letters of the alphabet. The line should then have the latitude, then a comma, optionally a space, then the longitude, then a comma, then a label for the point. The label can include wiki mark-up (and commas). The following uses currently functional options:

<googlemap lat="36.903166" lon="-82.316523" type="hybrid" width=600 height=300 zoom=13 controls=small selector=no scale=yes> 
36.903166,-82.316523, [http://genealogy.wikia.com/wiki/Glade_Hollow_Fort Moore's Fort 1774] aka Fort Byrd, Daniel Boone commanding 20 men, 6 Oct. 1774
#0DC4F2
36.903166,-82.316523
36.900166,-82.328530
</googlemap>

Yields:

File:GoogleMaps1.png
Due to limitations of Help:Shared Help, this is a screenshot. See w:c:help:Google maps/examples#Markers for a live example.

Because the "icons" attribute defaults to "http://maps.google.com/mapfiles/marker{label}.png", that last marker will use the icon http://maps.google.com/mapfiles/markerS.png. You can host your own collection of icons on your server, but note that they'll have the same anchor points as Google's default icon. Check out Mapki's collection of icon images for a bunch of icons you can use.

Paths

To connect multiple points with a colored path, prefix them with a line that begins with the color in RGB hex format., e.g.

#330000 42.711618,-73.205112 42.714779,-73.204544

That will connect the two points with a colored line. Any points not on a line should appear before all points on lines. For example:

42.711618, -73.25112, this point is not on a line 43.224024, -70.28301, neither is this one #770077 42.202452, -72.83101, this is on a line of color #77077 45.214425, -72.48114, so is this #668800 42.201324, -70.95811, this starts a second line 43.404142, -73.44514, this is also on the second line

Any text on same line as, but appearing after, the color specification will be ignored.

You'll probably want to use the Editor's Map to generate this syntax.

Tabs

A feature new to 0.7 are tabbed info balloons. Each tab should have a plain-text title surrounded by inward-leaning slashes (like /this\) followed by a caption that can include wiki mark-up. Tabs will be attached to the previous marker. Example:

45.214425, -72.48114 /Info\       This is where Ulysses Grant is buried/Directions\ [http://maps.google.com Click here] to get driving directions

That will create a point whose info balloon has two tabs. Note that you can put as much or as little space as you'd like between the title and the caption to make the syntax more readable.

If a point has a regular caption and tabbed captions, clicking the point will only show the tabbed captions.

A simple Google map

<googlemap lat="42.711618" lon="-73.205112" zoom="2" controls="small">
42.711618,-73.205112,the fabulous, famous [[Sawyer Library]]
</googlemap>

Produces:

File:GoogleMaps2.png
Due to limitations of Help:Shared Help, this is a screenshot. See w:c:help:Google maps/examples#A simple Google map for a live example.

External links