This guide goes into detail of how to enter code manually to create Google maps using the Google Maps extension.

Contents 1 A simple Google map example 2 Coding 3 Easiest way to find coordinates 4 Why is the map box grey? 5 Extension options 6 Markers 7 Paths 8 Tabbed info balloons 9 Notes

A simple Google map exampleEdit

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

See Google map examples on Community Central for some examples.

CodingEdit

Google maps start with the code <googlemap> and ends 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 in Berlin 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 is the text added to the placemark. Wikilinks can also 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 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.

Easiest way to find coordinatesEdit

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?Edit

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!

Extension options Edit

Available coding options are:

• width (in pixels; default is 740)
• height (in pixels; default is 600)
• lat (the center latitude on the map)
• lon (the center longitude on the map)
• zoom (the zoom level; 0 is the furthest away, 21 is the closest in)
• type ("normal" or "map", "hybrid", or "satellite"; default is "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? yes (default) and no.)
• scale (show the distance scale? yes and no (default).)
• overview (show the inset navigation map? 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)
• units ("meters" or "miles"; default is "meters".)

All attributes are optional.

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>

Markers Edit

In the content of the tag, you can define one marker per line.

• Each line can optionally start with an icon name in parentheses; unless you set the "icons" attribute, icon names are the upper-case letters of the alphabet. example: (S)
• the latitude, then a comma, optionally a space, example: 42.711618,
• then the longitude, then a comma, example: -73.205112,
• then the text for the pop up information balloon. The label can include wiki coding (and commas) example: The fabulous, famous [[Sawyer Library]]

For example:

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

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.

For example:

<googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png">
38.453857, -84.356461, Rick Grimes Shot
</googlemap>

Paths Edit

To connect multiple points with a colored path, start the line with a color in RGB hex format., for example:

#330000
42.711618,-73.205112
42.714779,-73.204544

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

<googlemap lat="42.711618" lon="-73.25112" zoom=6 type=normal>
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
</googlemap>

Produces:

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

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

Tabbed info balloons Edit

New to version 0.7 To create 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 coding. Example:

<googlemap lat="45.214425" lon="-72.48114" zoom=6 type=normal>
45.214425, -72.48114 
/Info\       This is where Ulysses Grant is buried
/Directions\ [http://maps.google.com Click here] to get driving directions
</googlemap>

That will create a marker 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 tabs readable.

If a marker has a regular caption and tabbed captions, clicking the point will only show the tabbed captions.^[1]

NotesEdit

1. ↑ For example:
   <googlemap lat="45.214425" lon="-72.48114" zoom=6 type=normal>
   45.214425, -72.48114, THIS SENTENCE WILL NOT SHOW UP
   /Info\ This is where Ulysses Grant is buried
   /Directions\ [http://maps.google.com Click here] to get driving directions
   </googlemap>