Add Markers

Display markers to identify locations on Woosmap Map.

  1. Add a Marker
  2. Remove a marker
  3. Marker Click Event
  4. Marker labels

Markers are used to display clickable/draggable icons on the map. You can attach a wide variety of event listeners to control user interaction.

Add a Marker

To add a Marker, you’ll need to create a new instance of passing it a MarkerOptions object to specify the initial properties of the marker.
Consider to set the following fields when defining a new marker:

        marker = new{
  position: map.getCenter(),
  icon: {
    url: '',
    scaledSize: {
      height: 64,
      width: 46


Remove a marker

To remove a marker from the map, call the setMap() method passing null as the argument.



The marker still exists in memory so if you want to remove it completely, you should also set marker = null and thus make it eligible for garbage collector (or simply markersArray.length = 0 for an array of markers).

Marker Click Event

Markers are designed to respond to user events such as mouse or keyboard events. The following example display all megacities in the world. Clicking on a marker will display the name and number of citizens for the megacity and add a new marker with a different icon for visual purpose.

        marker = new{
  position: latlng,
  icon: iconurl
marker.addListener("click", () => {
  marker.getPosition() //access the marker position


Marker labels

A marker Label is a maker with a text label drawn inside it. You can set a marker label as either a string or a MarkerLabel object that includes a string and other label properties such as the font size or the text color.

The label positioning is specified using the labelOrigin point property of the marker icon.

        const iconMarker = {
    labelOrigin: new, 12),
    url: ""
const marker = new{
    position: myMap.getCenter(),
    icon: iconMarker,
    label: {
        text: "1",
        color: "white"
    map: myMap


The following example displays labeled markers when the user clicks on the map:

Was this article helpful?
Have more questions? Submit a request