Add Markers

Display markers to identify locations on Woosmap Map.

Add a Marker
Remove a marker
Marker Click Event
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:

position (required) specifies the Latitude and Longitude identifying the location of the marker.
icon (optional) specifies an image to display at the position. Set at least the url of the image and, optionally, the scaledSize of the icon and the anchor where the icon’s hotspot should be offset. You may specify the icon later by calling the marker’s setIcon() method.
map (optional) specifies the Map on which to place the marker. You may display the marker on the map later by calling the marker’s setMap() method.

            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.

        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
});

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

‹ Display your Stores Handling Events ›

Was this article helpful?

Have more questions? Submit a request