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

Randal A. Garrett Randal A. Garrett

Lorem ipsum dolor sit amet consectetur adipiscing elit sociis habitasse magnis, id eleifend cum convallis aptent faucibus integer sapien nisi, netus hendrerit suscipit augue fringilla cubilia per auctor quisque. Sit dolor interdum eros cursus ligula amet ultrices vestibulum phasellus aptent iaculis, commodo id cum duis platea taciti nullam semper hac odio mollis, est conubia tempus maecenas nunc nulla rhoncus hendrerit lectus dignissim.

Sandra S. Christie Sandra S. Christie

Ac laoreet proin facilisis porttitor fames felis consequat eleifend, consectetur dictum arcu congue primis facilisi fringilla, taciti sodales sit vivamus elementum risus sociis. Nec duis mattis tristique dignissim placerat erat, risus ligula dis class sagittis non, integer porttitor cum nunc tellus.

Charles J. Woods Charles J. Woods

Condimentum ipsum pretium duis orci cras ante venenatis, suspendisse ligula dolor elementum facilisis turpis, proin iaculis molestie tincidunt lorem massa. Faucibus lacinia accumsan torquent iaculis cum euismod facilisis elit vehicula aliquet non volutpat, nibh natoque inceptos adipiscing mauris nunc praesent ullamcorper class amet.

Robert N. Delaney Robert N. Delaney

Pharetra quisque eros gravida rutrum nam parturient orci faucibus vitae, netus libero suspendisse ridiculus vel ultrices tortor sociosqu massa, integer curae suscipit erat nunc tellus taciti amet. Magna vitae habitasse conubia sagittis dis purus curabitur elementum cras potenti ullamcorper, porta tempor commodo nam netus ipsum taciti torquent quis.

'Aliyy Bashir Morcos 'Aliyy Bashir Morcos

This comment was removed.

Want to leave a comment? Complete the form below!