# Google Map

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

WARNING

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

After obtaining a valid API key follow the next steps to setup the map.

# ▶️️️️️ Step 1.

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

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

# ▶️️️️️ Step 2.

The example map is embedded on 📄 page-inner-contacts-2.html page. Open that page in the text editor then find gmap container markup in HTML code.

<div class="gmap js-gmap">
  ...
</div>

# ▶️️️️️ Step 3.

  • Adjust map zoom level using data-gmap-zoom="14" attribute. Please note that custom zoom level works only if there is a single marker placed on the map. Otherwise the map will try to zoom and position itself to fit all the markers in the bounds.
  • Customize map visual appearance using data-gmap-snazzy-styles="..."attribute. You can generate and preview custom map styles from Snazzy Maps (opens new window) free online service.
<div class="gmap" data-gmap-zoom="14" data-gmap-snazzy-styles="...">
  <div class="gmap__container"></div>
  ...
</div>

Styles from Snazzy Maps not applied?

Try to use single quotes when passing an attribute value in the HTML.
So use data-gmap-snazzy-styles='...' instead of data-gmap-snazzy-styles="..."

# ▶️️️️️ Step 4.

  • Add a map marker by passing the required parameters – GPS coordinates and image. Multiple markers are supported as well.
  • Optionally you can add a text/HTML content for the infobox that will appear when a user clicks on the marker.
  • For the marker icons please avoid the using of .svg graphics since it may produce visual glitches in some browsers. Use .jpg, .png instead.
<div class="gmap" data-gmap-zoom="14" data-gmap-snazzy-styles="...">
  <div class="gmap__container"></div>
  <!-- Map Markers -->
  <div class="gmap__marker d-none" data-marker-lat="40.6700" data-marker-lon="-73.9400" data-marker-content="Rubenz Headquarters" data-marker-img="img/general/marker.png"></div>
  <div class="gmap__marker d-none" data-marker-lat="40.700" data-marker-lon="-73.9500" data-marker-content="Rubenz Headquarters #2" data-marker-img="img/general/marker.png"></div>
  <!-- - Map Markers -->
</div>

# Troubleshooting

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