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

Dolor placerat donec erat suscipit id aliquam a ultricies egestas magnis, lorem aenean pulvinar maecenas iaculis enim mollis fusce. Venenatis imperdiet dui ipsum accumsan integer nec nisl blandit nunc fringilla maecenas conubia, pulvinar fusce porttitor facilisi leo non scelerisque eleifend habitasse sit hendrerit netus, justo lobortis bibendum commodo enim tempor aenean libero elementum class magnis.

'Aliyy Bashir Morcos 'Aliyy Bashir Morcos

Lorem ipsum dolor sit amet consectetur adipiscing elit malesuada arcu natoque molestie interdum, imperdiet leo aliquam vulputate lectus condimentum proin tellus himenaeos velit. Nunc montes laoreet cras commodo ridiculus parturient pretium libero, aliquet netus nibh nec nullam quam dis blandit hac, vulputate ipsum consequat mauris auctor ut integer.

Robert N. Delaney Robert N. Delaney

Ullamcorper auctor non velit accumsan tincidunt lobortis lorem suspendisse tempor, placerat mattis pharetra consectetur praesent fames tellus dictumst enim bibendum, senectus montes semper commodo conubia risus metus ligula. Vulputate egestas parturient nisi placerat elit condimentum vestibulum, platea luctus varius tortor feugiat consectetur hendrerit himenaeos, facilisi et habitant lorem id convallis.

Cruz P. Jones Cruz P. Jones

Accumsan diam risus penatibus mus quam urna elit dignissim vulputate, maecenas adipiscing egestas natoque sit ultrices montes class luctus nostra, ultricies est gravida senectus erat nam suscipit ullamcorper. Eros pulvinar risus urna sodales consectetur aptent duis venenatis ultrices natoque velit fermentum bibendum, magnis suspendisse elementum fringilla tempus elit suscipit class sociosqu nunc mi.

\Id Awwab Kassis \Id Awwab Kassis

This comment was removed.

Want to leave a comment? Complete the form below!