Rhye

# Google Map

# Markup

<div class="gmap js-gmap" data-gmap-zoom="14" data-gmap-snazzy-styles="...">
  <div class="gmap__container"></div>
  <div
    class="gmap__marker d-none"
    data-marker-lat="40.6700" 
    data-marker-lon="-73.9400" 
    data-marker-content="Rhye Headquarters" 
    data-marker-img="img/general/marker.png"
  ></div>
</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) online service.

WARNING

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

← Grids →