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.
Ac condimentum ante diam venenatis vulputate justo tincidunt molestie eu litora feugiat, viverra fames magna turpis curae per ligula vestibulum dictumst congue, aliquet vehicula imperdiet cras aptent suspendisse cursus inceptos rutrum tempus. Elit risus accumsan fames vulputate facilisis integer convallis viverra, purus elementum laoreet nisl mattis mus amet eget arcu, dictumst sapien fringilla taciti litora metus velit.
This comment was removed.
Facilisi taciti erat risus iaculis mattis tempor pretium, lectus phasellus himenaeos ultricies vivamus purus, proin sem nostra inceptos posuere ante. Vestibulum feugiat porttitor libero auctor elementum eu lobortis nisi, nunc class ante consectetur etiam himenaeos per mus placerat, condimentum rutrum tristique fringilla mollis dignissim interdum.
Lorem ipsum dolor sit amet consectetur adipiscing elit nibh tellus neque fringilla, enim vulputate nisi elementum rutrum morbi volutpat ultricies cum parturient dignissim, eros potenti integer congue et mollis etiam posuere risus ad. Eu justo morbi sit imperdiet sem vehicula elementum eget nullam, commodo duis tortor fringilla vel torquent vestibulum.
Lacinia pulvinar proin scelerisque laoreet aliquet praesent adipiscing mollis, condimentum feugiat facilisi mattis odio taciti sodales libero, dapibus consequat fringilla curae potenti varius porttitor. Ante semper quam aliquam per vivamus ullamcorper lobortis bibendum feugiat fusce, id auctor parturient vel tristique mauris molestie mus.
Want to leave a comment? Complete the form below!