Google Map

To use Google Map 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, you need to set it at the bottom of the template pages:

<!-- 1. Setup Google Map API Key first -->
<script src="https://maps.googleapis.com/maps/api/js?key=***YOUR_API_KEY***"></script>

Then find and customize the gmap component markup in the HTML code:

<!-- 2. Customize map zoom level and style. You can generate styles from here -> https://snazzymaps.com/explore -->
<div class="gmap" data-gmap-zoom="14" data-gmap-snazzy-styles='[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}]'>
  <div class="gmap__container"></div>
  <!-- 3. Customize markers GPS coordinates and other stuff. You can place as many markers as you wish. -->
  <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>

Still having issues?

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