Google Maps

by Justin Bodeutsch | Last edited: 5/12/2008

 Adding a google map to your page is an easy process, but it can fail if any piece is missing. Please read this guide carefully to make sure your map appears correctly.

 

1. Create a div

In your show, add a div with a unique id. Make sure that you specify a height and width for the div either in a style sheet or inline, otherwise no map will be shown.

Example:

"before_show:<div id="map"></div>... If you are showing multiple maps in a list with shows, you can use __count__ to make each id unique.

Example: show:<div id="map__count__"></div>...

 

 2. Get a key

You will need a key from Googe in other to retrieve the data. Fill out this form and save the key returned. (don't worry, it only takes a second)

http://code.google.com/apis/maps/signup.html

 

3. Add the tag

In the __googlemap__ tag, you'll need specify the key, zoom level and which div to use. The zoom needs to be between 0 (entire world) and 19 (single building).

Example:

"before_show: <div id="map"></div>__googlemap key="YOUR-GOOGLE-MAP-KEY" zoom='10' div='map'__"

Or in a show:

"show: <div id="map__count__"></div>__googlemap key="YOUR-GOOGLE-MAP-KEY" zoom='10' div='map__count__'__"

 

Complete Example

Here is a complete event list example:

getContent(
"event",
"display:list",
"enablepast:no",
"show:<h1>__title__</h1>",
"beforeshow:<div class="map" id='church__count__' style="width: 308px; height: 151px; margin-bottom: 10px"></div>__googlemap key='YOUR-GOOGLE-MAP-KEY'  zoom='11' div='church__count__'__", "nocache");

 

Or in event detail: 

getContent(
"event",
"display:detail",
"find:YOUR-EVENT-SLUG",
"show:<h1>__title__</h1>",
"show:<div class="map" id='church' style="width: 308px; height: 151px; margin-bottom: 10px"></div>__googlemap key='YOUR-GOOGLE-MAP-KEY'  zoom='15' div='church'__"
);