Kinsey

# Google Map

# Markup

<div class="gmap js-gmap" data-gmap-zoom="14" data-gmap-snazzy-styles="...">
  <div class="gmap__container"></div>
  <!-- markers -->
  <div 
    class="gmap__marker d-none" 
    data-marker-lat="40.6700" 
    data-marker-lon="-73.9400" 
    data-marker-content="Kinsey Creative Agency" 
    data-marker-img="img/general/marker.png">
  </div>
  <div 
    class="gmap__marker d-none" 
    data-marker-lat="40.7000" 
    data-marker-lon="-73.9500" 
    data-marker-content="Kinsey Creative Agency #2" 
    data-marker-img="img/general/marker.png">
  </div>
  <!-- - markers -->
</div>

# Map Attributes

  • data-gmap-zoom – Initial map zoom level [1...20].
  • data-gmap-snazzy-styles – JavaScript array with the map styles. You can generate and preview custom map styles using the Snazzy Maps (opens new window) free online service.

Note

Custom zoom level works 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.

# Marker Attributes

  • data-marker-lat – GPS latitude.
  • data-marker-lon – GPS longitude.
  • data-marker-content – Infobox content that will appear when a user clicks on the marker. Escaped HTML is acceptable.
  • data-marker-img – Marker image URL.

TIP

Google Maps API key setup is described in the Google Maps Setup article.

# Showcase

  • 📄 036-contacts.html

← Contact Form →