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

Keith C. Abell Keith C. Abell

Nullam facilisi eros litora sagittis cras egestas tristique, malesuada eget ante dignissim natoque taciti libero, tortor augue nostra dictumst scelerisque vel. Maecenas curabitur eleifend litora consequat elit ornare nisi cursus ante pulvinar lorem, tempus justo penatibus hendrerit facilisi laoreet taciti mollis aliquam tincidunt enim lectus, mauris potenti dictum erat per metus suscipit tristique dapibus donec.

Jose S. Guffey Jose S. Guffey

Lorem ipsum dolor sit amet consectetur adipiscing, elit cras egestas aptent posuere hac litora, fermentum nisi netus vivamus vestibulum. Suscipit ultricies at consequat nec inceptos habitasse aliquam volutpat elit ornare, urna feugiat velit vivamus nunc tempor platea dictum pulvinar, non purus sociosqu cursus eleifend adipiscing hac diam venenatis.

Adela G. Wharton Adela G. Wharton

Malesuada sem nec varius fusce curabitur accumsan neque ullamcorper, facilisis adipiscing rutrum dignissim ac venenatis donec, potenti amet nulla aptent himenaeos scelerisque non. Eros cras dignissim felis malesuada vehicula volutpat risus, tempor elementum at natoque eu congue nibh justo, erat parturient lorem facilisi viverra diam.

Sandra S. Christie Sandra S. Christie

Convallis eget auctor blandit ligula augue magna dictum himenaeos ante, tellus porttitor quisque netus feugiat consequat sociosqu pulvinar, eros molestie interdum orci justo tempor pellentesque mollis. Posuere integer aliquam sapien dictumst suspendisse dolor maecenas, cubilia id gravida montes vestibulum imperdiet taciti, ac turpis fermentum non convallis donec.

Timothy M. Dubose Timothy M. Dubose

This comment was removed.

Want to leave a comment? Complete the form below!