Kinsey

# Google Maps Setup

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).

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 these 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 page. The script id must be googlemap to work correctly after AJAX transitions.

<!-- Script ID must be "googlemap"-->
<script id="googlemap" src="https://maps.googleapis.com/maps/api/js?callback=Function.prototype&key=YOUR_API_KEY" async></script>

TIP

You can place the script API call only when it's needed on the page. For example, you can do this only on the "Contacts" page. This will save bandwidth and optimize the site loading speed.

# ▶️ Step 2.

The example map is embedded on the 📄 036-contacts.html page. Open that page in the text editor and 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. Note that the 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 js-gmap" data-gmap-zoom="14" data-gmap-snazzy-styles="...">
  <div class="gmap__container"></div>
  ...
</div>

WARNING

Styles from Snazzy Maps not applied? Try using single quotes when passing an attribute value in the HTML. 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, avoid using .svg graphics since they may produce visual glitches in some browsers. Use .jpg or .png instead.
<div class="gmap js-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="Kinsey Creative Agency"
    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="Kinsey Creative Agency #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 for errors produced by Google Map. For available solutions, please check the error messages knowledgebase (opens new window).

← Colors & Themes →