ClubWiki:Using GMaps

In many cases you can get by using the Editor's Map, but understanding the underlying coding of the Google maps extension will unlock a few extra features for you.

Extension options

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 (web address if the marker icon is customized. With "{label}" where the name of the icon will be inserted; defaults to "http://maps.google.com/mapfiles/marker{label}.png")
• icon (web address if the marker icon is not specified; the default icon is 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>

Icons

See Mapki's collection of icon images for a several icons you can use.

See Awaycity Swimming for an example of how to use icons.

You can create your own collection of icons (markers) on your server.<ref>These icons have the same anchor points as Google's default icons. For example, markerA will also be named markerA. </ref>

Change the Google Maps default icon

1. Add the icon address in quotes the googlemap tag, using icon:

<googlemap lat="36.072635" lon="-79.791975" icon="http://images.wikia.com/walkingdead/images/7/70/Markerfight.png">

Full coding:

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

Custom icons

1. Name the pictures with names such as:

marker(letter of alphabet).png.

For example, markerA.png to create the "A" marker, markerC.png to create the "C" marker, markerR.png to create the "R" marker, etc

2. Upload the pictures which will serve as the icons to your server.

3. Add the icons coding in quotes the googlemap tag, using icons:

<googlemap lat="53.35506" lon="-6.276283" icons="http://www.awaycity.com/images/mapfiles/marker{label}.png">

Full coding:

<googlemap lat="53.35506" lon="-6.276283" icons="http://www.awaycity.com/images/mapfiles/marker{label}.png">
(B) 53.422237547104515, -6.2295109033584595, ALSAA - Aer Lingus Swimming Pool
Membership required
(A) 53.34089264525343, -6.357307434082031, Ballyfermot Swimming Pool (Sean Dunne)
Membership required
(Z) 53.325577, -6.265393, Rathmines Swimming Pool
Closed. Expected completion date: November 2009
(F) 53.36863302821816, -6.14659309387207, Bull Island Beach
</googlemap>

Using <googlemap> in a template

If you would like to put a map inside a template, then you will need to use a slightly different coding to get the coding to work properly.

The following is an example for including a map without markers.

BAD:

<googlemap lat="{{{1}}}" lon="{{{2}}}">

GOOD:

{{#tag:googlemap|lat={{{1}}} lon={{{2}}}}}

This #tag technique only works with MediaWiki 1.12 and later.

if the above does not work, try

{{#tag:googlemap
|lat={{{1}}}
|lon={{{2}}}
}}

KML export

Beginning with version 0.9.0, there is a new tag called googlemapkml. This allows a visitor to your wiki to export (download to their computer) all of the maps on the current page to a KML file by clicking a link.<ref>The contents of the tag are the contents of the link.</ref> For example:

<googlemapkml>Download KML</googlemapkml>

File:Kml.PNG

Pop up box asking the user to download the kml coding to their desktop. In this example, all the KML map coding from the page "Locations" will be downloaded

To allow readers to export (download) the KML coding from your map, use the "article" attribute, for example:

<googlemapkml article="Chicago">View in Google Earth</googlemapkml>

This creates the link "View in Google Earth"

If the user clicks the link, "View in Google Earth", it opens a download pop up box, and downloads all the maps on your Chicago page to their computer. Template:-

KML import - export

Say for example, you have a wiki about a town. You have a map with theaters and a map with bus stations. You can merge these maps together, so that a visitor to your wiki can select which markers they would like to see (either from the theater map, from the bus stations map or both).

It is possible to merge the maps of some other articles within a new article’s map, but you must use the full url of GoogleMapsKML.

<googlemap>

http://your.wiki.url/index.php?title=Special:GoogleMapsKML&article=a_article

http://your.wiki.url/index.php?title=Special:GoogleMapsKML&article=another_article

...

</googlemap>

Map coding version "0" (default)

This section describes the "old coding", which is enabled by default. To force its use, set version="0" in the map attributes.

Markers

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>

Paths

This feature must first be enabled on your wiki; see Extension:Google Maps/Installation#Colored paths

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:

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 the same line as, but appearing after, the color specification will be ignored.

You'll probably want to use the Extension:Google Maps/Editor's Map to generate this coding.

Areas

New in 0.8

Areas are enclosed paths with a colored filling. The coding is just like a path, except that the interior color should be specified in parentheses after the path color, like this:

#770077 (#668800)

Tabs

New in 0.7

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 coding more readable.

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

Map coding version "0.9"

Starting with release 0.9.0, a new map coding is available. It differs only slightly from version "0". To use the new coding, you will need to set version="0.9" in the map attributes (the Editor's Map will do this for you). Benefits include:

• Multiline captions
• Specify opacity
• Titles that appear on mouse-over

The new coding is described below.

KML import

Before you specify any markers, you can add URLs that point to KML files. Each URL should be on its own line, e.g.

<googlemap>
http://some.url/
http://other.url/
...
</googlemap>

These files will be dynamically imported into the map each time the map is loaded.

Markers and Tabs

Markers can be specified in several ways:

No caption, just a point:

42.711618, -73.205112

A marker labeled "S":

(S) 42.711618, -73.205112

A title but no caption. The title can NOT contain wiki markup. It is displayed when a user mouses over the marker:

42.711618, -73.205112, Sawyer Library

Title plus a caption. The caption appears when a user clicks on the marker:

42.711618, -73.205112, Sawyer Library
[[Sawyer Library]], built in 1977

A caption can span multiple lines. However, the title is still optional, so this is okay too:

42.711618, -73.205112
[[Sawyer Library]], built in 1977

Finally, you can also create tabs. A tab's title should appear between inward facing slashes(/ and \). The content of a tab should be on a new line and can span multiple lines, just like captions.

latitude, longitude, title
/tab1\
caption1
/tab2\
caption2
...

Paths and Areas

You can connect multiple points with a color line. However, in version 0.9.0., the color must now include opacity and width information, for example:

6#FF330000

In the example above the width is 6 pixel's wide, the opacity is #FF (opaque) and the color is #330000.

The 6 means that the path will be 6 pixels wide. The first two hex digits specify the opacity from #00 (transparent) to #FF (opaque). The final 6 hex digits are a "web color", for example #RRGGBB.

Similarly for areas, the interior color should be 8 digits instead of 6; the first two digits define the opacity, for example:

6#770077 (#BB668800)

Advanced coding

Create a map list

File:The walking dead google maps screenshot.png

Google map, showing text in the list is the same in the info balloon

Google maps creates a list of all information in the info balloons. Template:-

File:Google maps list of all items in the template.png

Text in the list is the same as text in the info balloons in google maps, and changes as the info balloon information changes

With Google Maps extension, a side by side list of all maps locations and descriptions, which changes when you edit Google maps, is also possible with advanced templates.

This list is possible with three templates:

1. Map template with all information which appears in the map and list
2. List template which pulls the information from the map template
3. A template which explains the rules the templates follow and the formatting

For the coding to do this, see the edit pages of the above links, or Extension:Google Maps/Syntax/list

Changing the size of the balloon

To change the size of the pop-up info balloon, put the contents of the info window into a custom div. For example:

<div style="min-width: 120px; min-height: 120px;"> Text for balloon </div>