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 in 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 in 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 Google Maps Setup article.

← Grids →