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.
{{ name }}
{{ comment }}