# Google Map

If you want to use the Google Maps service in the template, you need to obtain a personal API Key from Google Cloud (opens new window). Google now requires a credit card to use their map API (even if you don’t have a lot of visitors which load their server anyway).

WARNING

The API key used in the live demo will NOT work on your website! You need to get your own if you want to use Google Maps on your website.

After obtaining a valid API key, follow the next steps to set up the map.

# ▶️ Step 1.

Set your API key as a parameter where the Google Maps script is linked at the bottom of the pages. Make sure to do this on each page template.

<script src="https://maps.googleapis.com/maps/api/js?callback=Function.prototype&key=YOUR_API_KEY" async></script>

# ▶️ Step 2.

The example map is embedded on the 📄 contact.html page. Open that page in the text editor, then find the gmap container markup in the HTML code. There you'll be able to adjust the marker icon, title, GPS coordinates, and set an initial zoom level.

<div
  class="gmap"
  id="js-gmap"
  data-gmap-lat="40.6700"
  data-gmap-lon="-73.9400"
  data-gmap-zoom="8"
  data-gmap-title="Arrigo Sabbani"
  data-gmap-marker="static/img/assets/gmap/marker.png"
></div>

# Troubleshooting

If you’ve set up a correct API key but are still experiencing issues with the Google Map, check your browser console and see the error produced by Google Map. For available solutions, please check the error messages knowledgebase (opens new window).

← Animations Contact Form →