Asli

# Google Map

Customization Reference
HTML selector 🔧 [data-arts-component-name="GMap"]
Component source 📄 HTML/js/components/Gmap.js
Component source (gulp) 📄 SOURCE/components/gmap/GMap.js

# Default Options

defaults: {
  googleMapAPIScriptSelector: 'script[src*="maps.googleapis.com/maps/api"]',
  zoom: 10,
  markerOptionsAttribute: 'data-marker-options',
  markerContentAttribute: 'data-marker-content',
  styles: '[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#111111"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#111111"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#111111"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#111111"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#111111"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#111111"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#111111"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#111111"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#111111"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#111111"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#111111"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#111111"},{"lightness":17}]}]'
}

# HTML Markup

<div
  class="gmap js-gmap"
  data-arts-component-name="GMap"
  data-arts-component-options="{}"
  >
  <div class="gmap__container js-gmap__container"></div>
  <!-- Markers -->
  <div
    class="gmap__marker d-none js-gmap__marker"
    data-marker-options="{lat: 40.7200, lng: -73.9500, img: 'img/map/marker.png', width: 66, height: 80}"
    data-marker-content="Floating window content #1">
  </div>
  <div
    class="gmap__marker d-none js-gmap__marker"
    data-marker-options="{lat: 40.7000, lng: -73.9000, img: 'img/map/marker.png', width: 44, height: 53}"
    data-marker-content="Floating window content #2">
  </div>
  <div
    class="gmap__marker d-none js-gmap__marker"
    data-marker-options="{lat: 40.6700, lng: -73.9900, img: 'img/map/marker.png', width: 33, height: 40}"
    data-marker-content="Floating window content #3">
  </div>
  <!-- - Markers -->
</div>

# Customization

# 1. Google Maps API 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 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, create a <script> tag only on the page where you're planning to use the GMap component. Here is an example:







 



    ...
    <!-- TEMPLATE SCRIPTS -->
    <script src="js/vendor.js"></script>
    <script src="js/framework.js"></script>
    <script src="js/app.js"></script>
    <!-- - TEMPLATE SCRIPTS -->
    <script async src="https://maps.googleapis.com/maps/api/js?callback=Function.prototype&amp;key=YOUR_API_KEY_HERE&amp;"></script>
  </body>
</html>

# 2. Configuring markers

The following options are set inline via the [data-marker-options] attribute in the component markup:



 



  <div
    class="gmap__marker d-none js-gmap__marker"
    data-marker-options="{lat: 40.7200, lng: -73.9500, img: 'img/map/marker.png', width: 66, height: 80}"
    data-marker-content="Floating window content #1">
  </div>

{
  lat: 40.7200, // latitude
  lng: -73.9500, // longitude
  img: 'img/map/marker.png', // marker icon path (please don't use *.svg)
  width: 66, // marker icon width
  height: 80 // marker icon height
}

# 3. Adding floating windows for markers

Insert custom content into the [data-marker-content] attribute of the marker. This attribute accepts plain text or escaped HTML. The content appears when a visitor clicks on the marker.




 


  <div
    class="gmap__marker d-none js-gmap__marker"
    data-marker-options="{lat: 40.7200, lng: -73.9500, img: 'img/map/marker.png', width: 66, height: 80}"
    data-marker-content="&lt;span class=&quot;ui-element&quot;&gt;Asli HQ #1&lt;/span&gt;">
  </div>

A helpful tool to escape/unescape HTML markup: Freeformatter (opens new window)

# Troubleshooting

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)

← Grid →