Source: https://developers.woosmap.com/products/map-api/guides/markers/
> For clean Markdown of any page, append `.md` to the page URL.
> For a complete documentation index, see https://developers.woosmap.com/llms.txt
# Add Markers
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](/products/map-api/reference/1.4/#woosmap.map.Marker) passing it a [MarkerOptions](/products/map-api/reference/1.4/#woosmap.map.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.
https://demo.woosmap.com/js-samples/samples/marker-simple/app/dist/
[](https://demo.woosmap.com/js-samples/samples/marker-simple/highlight/highlight.html "Open in new tab with highlighted code")
Try sample
- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/marker-simple/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/marker-simple/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/marker-simple)
```typescript
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;
```
```javascript
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;
```
```css
/*
* 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
Marker Simple
```
## 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.
https://demo.woosmap.com/js-samples/samples/marker-click-event/app/dist/
[](https://demo.woosmap.com/js-samples/samples/marker-click-event/highlight/highlight.html "Open in new tab with highlighted code")
Try sample
- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/marker-click-event/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/marker-click-event/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/marker-click-event)
```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](/products/map-api/reference/1.4/#woosmap.map.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:
https://demo.woosmap.com/js-samples/samples/marker-label/app/dist/
[](https://demo.woosmap.com/js-samples/samples/marker-label/highlight/highlight.html "Open in new tab with highlighted code")
Try sample
- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/marker-label/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/marker-label/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/marker-label)