# 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?key=YOUR_API_KEY" async></script>

# ▶️ Step 2.

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

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

# ▶️ Step 3.

  • Adjust the map zoom level using the data-gmap-zoom="14" attribute. Please note that a 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 the map's visual appearance using the data-gmap-snazzy-styles="..." attribute. You can generate and preview custom map styles from the 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 text/HTML content for the infobox that will appear when a user clicks on the marker.
  • For the marker icons, please avoid using .svg graphics since it may produce visual glitches in some browsers. Use .jpg or .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 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 the available solutions, please check the error messages knowledgebase (opens new window).