Google Maps

Last edited: 1/22/2020

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 tag, 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__'__"

3. Add the key (required)

If you are displaying more than 25,000 maps per day or if you would like to track your usage you may add an api key.  We are using version 3 of the Google API so if you had an API key for previous versions a new key will be required.

Example:

"before_show: <div id="map"></div>__googlemap  zoom='10' div='map' v3key="YOUR-API-KEY"__"

4. Select map type (optional)

If you would like to use a map type other than the default road map you can change it with they maptype parameter. Options include:

  • ROADMAP (default)
  • SATELLITE 
  • HYBRID
  • TERRAIN

Example:

"before_show: <div id="map"></div>__googlemap  zoom='10' div='map' maptype="HYBRID"__"

5. Disable Scroll Wheel Zooming (optional)

You can disable scrollwheel zooming of the map by adding an additional tag to the api call.

Example:

"before_show: <div id="map"></div>__googlemap div='map' scrollwheel='no'__"

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' scrollwheel='no'__",
"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' scrollwheel='no'__"
);