Google Map

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

After obtaining a valid API key you need to set it in the bottom of 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 a gmap component in HTML code.

<!-- 2. Customize map zoom level and style. Your 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>

Please note that API key used in demo will not work on your website.

If you’ve got 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 this article.