Markers

Display markers to identify locations on our Woosmap Map.

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

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 woosmap.map.Marker 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 woosmap.map.Marker({
  position: map.getCenter(),
  icon: {
    url: 'https://images.woosmap.com/dot-marker.png',
    scaledSize: {
      height: 64,
      width: 46
    }
  }
});
marker.setMap(myMap);

Remove a marker

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

marker.setMap(null);

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 woosmap.map.Marker({
  position: latlng,
  icon: iconurl
});
marker.setMap(map);
marker.addListener("click", () => {
  marker.getPosition() //access the marker position
});
Was this article helpful?
Have more questions? Submit a request