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 -->
  <div class="gmap__marker d-none" data-marker-lat="40.6700" data-marker-lon="-73.9400" data-marker-content="Harizma 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.

In the example above there is a custom styles code generated by Snazzy maps – a useful service for styling your Google Map. You can generate map styles here. After that simply copy-paste code snippet to data-gmap-snazzy-styles attribute.