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

'Aliyy Bashir Morcos 'Aliyy Bashir Morcos

This comment was removed.

Mary D. Newman Mary D. Newman

Conubia mollis condimentum lobortis augue nec vivamus auctor suscipit platea pulvinar eget nisl, in ad dictumst natoque ultrices ante dis primis duis ligula. Ornare justo primis sociis accumsan mattis pretium sed orci ligula phasellus mauris, risus rutrum pharetra nisl ipsum diam montes habitant quisque posuere tempor arcu, ante per euismod vivamus auctor enim varius porta tincidunt molestie.

John C. Carlton John C. Carlton

Lorem ipsum dolor sit amet consectetur adipiscing elit ante hac, magna class suscipit nibh turpis est aptent auctor diam, vehicula penatibus risus mus curae euismod parturient aliquet. Natoque justo ac sollicitudin viverra eros nec eu sit, neque elit odio egestas semper turpis fames proin, pretium pellentesque mollis malesuada auctor consequat metus.

Adela G. Wharton Adela G. Wharton

Vestibulum eros in vivamus fames dictumst dui tempor quis nisl diam commodo aliquam hac, euismod urna curae magna nec cras class elementum posuere phasellus tellus. Tempus ultricies purus risus nisl diam tortor pretium libero aenean curae, varius parturient non rutrum congue metus condimentum quisque ut, penatibus conubia vulputate cubilia habitasse consequat imperdiet in curabitur.

Keith C. Abell Keith C. Abell

Urna sit lobortis felis sociis fames consectetur erat est ultrices, class mollis cum venenatis ullamcorper congue phasellus vivamus, rutrum posuere vitae dictumst aenean tempor arcu mi. Primis adipiscing faucibus in amet dis posuere aliquet nisl consectetur, phasellus auctor ac odio interdum morbi mus mollis, torquent euismod ullamcorper leo id nunc purus justo.

Want to leave a comment? Complete the form below!