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 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:

Add a simple marker
        function initMap(): void {
  const center: woosmap.map.LatLngLiteral = { lat: 51.52, lng: -0.13 };

  const map = new woosmap.map.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 13,
      center: center,
    },
  );

  const marker = new woosmap.map.Marker({
    position: map.getCenter(),
    icon: {
      url: "https://images.woosmap.com/marker.png",
      scaledSize: {
        height: 50,
        width: 32,
      },
    },
  });
  marker.setMap(map);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

    
        function initMap() {
  const center = { lat: 51.52, lng: -0.13 };
  const map = new woosmap.map.Map(document.getElementById("map"), {
    zoom: 13,
    center: center,
  });
  const marker = new woosmap.map.Marker({
    position: map.getCenter(),
    icon: {
      url: "https://images.woosmap.com/marker.png",
      scaledSize: {
        height: 50,
        width: 32,
      },
    },
  });

  marker.setMap(map);
}

window.initMap = initMap;

    
        /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}


    
        <html>
  <head>
    <title>Marker Simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <script
      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback=initMap"
      defer
    ></script>
  </body>
</html>

    

Remove a marker

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

JavaScript
        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.

JavaScript
        marker = new woosmap.map.Marker({
  position: latlng,
  icon: iconurl
});
marker.setMap(map);
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.

javascript
        const iconMarker = {
    labelOrigin: new window.woosmap.map.Point(12, 12),
    url: "https://images.woosmap.com/marker-red.png"
};
const marker = new window.woosmap.map.Marker({
    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