Rhye

# 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 API key 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 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 📄 page-inner-contacts-2.html page. Open that page in a 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 custom zoom levels work 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 within 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>

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 as 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="Rhye Creative Studio" 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="Rhye Creative Studio #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).

← Customizing Colors →