Google Maps

Last edited: 11/18/2011

 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. Add the tag

In the __googlemap__ tag, you'll need specify the 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  zoom='10' div='map'__"

Or in a show:

"show: <div id="map__count__"></div>__googlemap zoom='10' div='map__count__'__"

 

Complete Example

A list with a single map before the list.

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

A list with a map for each item in the list.

getContent(
"event",
"display:list",
"howmany:10",
"show:<h1>__title__</h1>",
"show:<div class='map' id='event__count__' style='width: 308px; height: 151px; margin-bottom: 10px'></div>__googlemap zoom='11' div='event__count__'__");

 

Or in event detail: 

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