Google Maps
The Maps API lets you customize maps with your own content.Basic
<div data-map="myMap" data-lat="40.7143528" data-lng="-74.0059731" data-zoom="16"></div>
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
<div data-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
<div data-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
<div data-marker-label="S2"></div>
Marker custom icon
Use the data-marker-icon attribute to set a custom marker source. Or do this in the configuration file.
<div data-marker-icon="assets/img/map/marker.png"></div>
Marker window content
An data-marker-content displays content (usually text or images) in a popup window above the map, at a given location.
<div data-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>