Stillat LLC
September 10, 2017 2 minute read

Google Maps Integration

Tanager includes support for the Google Maps API; is used on the demo Contact page.

You can create a map anywhere you'd like (styling the containing element will be up to you); you can create a new map at anytime using Tanager's simple data map API. The following would create a new Google Map similar to what appears on the contact page:

<div class="section__content--halfway" data-map
     data-map-zoom="17"
     data-map-lat="51.4838005"
     data-map-lng="-0.6043169">
</div>

Creating a Map

To create a map, add the data-map data attribute to any element that you'd like to render as a map:

<div data-map></div>

Setting the Latitude and Longitude

To keep things simple, the Tanager maps API accepts only the latitude and longitude that you'd like to display; set these with the data-map-lat and data-map-lng data attributes, respectively:

<div data-map
     data-map-lat="51.4838005"
     data-map-lng="-0.6043169">
</div>

Setting the Zoom Level

The Tanager map API assumes a zoom level of 17 by default; this can be changed by supplying a value for the data-map-zoom data attribute:

<div data-map
     data-map-zoom="17"
     data-map-lat="51.4838005"
     data-map-lng="-0.6043169">
</div>

Setting the Google Maps API Key

You need to specify your Google Maps API in order for your Google Maps to render on the page. To do this, you must edit the site/themes/tanager/layouts/default.html file. At the bottom of the page, you will find the <script /> tag that is pulling in the Google Maps library:

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=<API_KEY>" async defer></script>    

Replace the <API_KEY> placeholder with your Google Maps API key. If you need a new Google Maps API key, go to https://developers.google.com/maps/documentation/javascript/get-api-key and follow the instructions.

Sorted.

Comments

Meerkat is running in Designer Mode; the comments displayed below are chosen at random. Any comments that are submitted will not be saved.

Cancel Reply

Robert N. Delaney Robert N. Delaney

Blandit himenaeos bibendum tempus leo donec hac accumsan cras pellentesque vestibulum auctor, quis erat commodo iaculis sollicitudin proin cursus lobortis nostra lacinia semper, sodales etiam porttitor facilisi libero suscipit luctus porta platea tincidunt. Natoque inceptos ridiculus porta diam volutpat etiam mauris vitae, ultrices aliquam mus rhoncus phasellus at sed ut cras, enim convallis fringilla nullam viverra laoreet pulvinar.

Charles J. Woods Charles J. Woods

Lorem ipsum dolor sit amet consectetur adipiscing elit bibendum nec, interdum lacinia conubia vivamus ultrices pellentesque integer neque volutpat, suscipit accumsan habitant varius magnis natoque ridiculus imperdiet. Ut facilisi nullam fringilla sodales senectus litora curae congue ligula sollicitudin, neque parturient consequat elit varius tincidunt curabitur sapien at.

Robert N. Delaney Robert N. Delaney

Primis magnis et placerat scelerisque duis vivamus fermentum viverra, libero mauris quis in nostra lobortis commodo gravida, aliquam sagittis aenean egestas est vehicula potenti. Posuere pellentesque eget eleifend aptent adipiscing etiam fusce sem, egestas montes tempus gravida euismod semper sapien vivamus litora, mi nisl natoque at mus nam parturient.

Beatrice A. Bird Beatrice A. Bird

This comment was removed.

Jonathon B. Louie Jonathon B. Louie

Taciti augue lorem netus aliquet nec leo praesent, tempor sit gravida bibendum faucibus malesuada nascetur at, integer turpis primis placerat senectus quam. Eros malesuada facilisis tellus mi nam enim cursus, nullam faucibus nec dolor lorem suspendisse luctus, habitant odio duis magnis pretium dis.

Want to leave a comment? Complete the form below!