Google Maps

The Maps API lets you customize maps with your own content.

Basic 

<divdata-map="myMap"data-lat="40.7143528"data-lng="-74.0059731"data-zoom="16"></div>

Styles

You can use one of the below presented styles or customize personally.

Light

Dark

Custom

Marker

A marker identifies a location on a map.

By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as "icons."

Marker 
<divdata-map="myMapMarker"data-marker-lat="40.7143528"data-marker-lng="-74.0059731"data-marker-title="Office"data-zoom="16"... ></div>
  • data-marker-lat- Marker latitude.
  • data-marker-lng- Marker longitude.
  • data-marker-title- Marker title.

Animate a marker

You can animate markers so that they exhibit dynamic movement in a variety of different circumstances.

Marker 
<divdata-marker-animation="bounce"></div>
  • data-marker-animation="drop"- indicates that the marker should drop from the top of the map to its final location when first placed on the map.
  • data-marker-animation="bounce"- indicates that the marker should bounce in place.

Customize a marker

If you want to display a letter or number on a marker, you can use a marker label. If you need greater customization, you can define an icon to show instead of the default marker image. Defining an icon involves setting a number of properties that determine the visual behavior of the marker.

Marker label 
<divdata-marker-label="S2"></div>

Marker custom icon

Use the data-marker-iconattribute to set a custom marker source. Or do this in the configuration file. 

<divdata-marker-icon="assets/img/map/marker.png"></div>

Marker window content

An data-marker-contentdisplays content (usually text or images) in a popup window above the map, at a given location. 

<divdata-marker-content="<h6>Office</h6><p>Donec rutrum scelerisque ex, non lobortis turpis feugiat in. Vivamus iaculis pharetra odio, id feugiat est pharetra eu. Vestibulum quis sapien nisl.</p><p class='mb-0'>Attribution: Uluru, <a href='https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194'>Uluru (last visited June 22, 2009).</a></p>"></div>