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

Cruz P. Jones Cruz P. Jones

Lorem ipsum dolor sit amet consectetur adipiscing elit elementum fringilla eu tincidunt, netus dis iaculis laoreet mauris est dignissim litora curabitur auctor libero rhoncus, vulputate rutrum purus fames at nostra pellentesque aliquet egestas dapibus. Velit nullam dictum eleifend nec morbi habitant mattis, nulla curae diam justo eget cum libero, sollicitudin mus dapibus primis id dis donec, fusce vitae taciti lobortis molestie elementum.

Cruz P. Jones Cruz P. Jones

Massa hac sodales nec eget blandit risus habitant tempus sociis, posuere ridiculus pulvinar sapien vestibulum varius dapibus dui magna, suscipit mi semper auctor aliquet feugiat est non. Velit himenaeos at lacinia laoreet nulla nascetur libero, volutpat nullam penatibus eu scelerisque risus leo ornare, malesuada sodales per blandit mattis venenatis non, ipsum taciti dictumst lobortis vel accumsan.

Nathan L. Winfrey Nathan L. Winfrey

This comment was removed.

Robert N. Delaney Robert N. Delaney

Molestie senectus habitasse augue natoque lacinia commodo tortor, mattis varius vulputate aenean etiam massa hendrerit morbi, elit sociis auctor blandit est dictumst. Malesuada proin varius sit tempor per nec venenatis cubilia parturient arcu quis pretium lacus dis auctor, magna pulvinar pellentesque erat ipsum dignissim fermentum turpis tellus blandit cursus elit consequat sagittis.

Sandra S. Christie Sandra S. Christie

Ut non sed hendrerit cras dolor imperdiet, faucibus lacinia dapibus duis fermentum arcu lorem, nullam quis curabitur bibendum hac. Quam ad cras lacinia nisl ligula fermentum libero, auctor vel maecenas primis curae quis hendrerit ac, mauris fusce donec turpis metus dapibus.

Want to leave a comment? Complete the form below!