• Open in:

Custom HTML Elements as Map Markers

This example demonstrates how you can use JavaScript Maps’ API functions and events to easily add custom-styled HTML elements as map markers.

Each map marker is a separate <div> element with two child elements. Styled using CSS.

Markers are placed into map’s container and globally-positioned using top and left style properties. The code uses JavaScript Maps’ built-in API functions longitudeToX() and latitudeToY() to translate marker’s longitude and latitude into screen coordinates.

Demo source