Marker

A newer version of Maps for web SDK is available

A newer version of the SDK is available and is recommended for all users. Learn about the latest version, V2.0, in the Maps for web v2.0 documentation

Creates a marker.

Parameters

Name	Description
position	The coordinates of the marker
map	The map instance to which the marker attaches to
icon	`optional` You can choose one of the following icon colors: `green`, `blue`, `black`, `gold`, `grey`, `red`, `orange`, `violet` or `yellow`. Alternatively, you can use a valid URL of an image, for example: `https://upload.wikimedia.org/wikipedia/commons/0/06/Gfi-set01-info-blue.png` `Default: 'green'`
title	`optional` Add an HTML tooltip to the marker that shows on hovering `Default: ''` (Not available for NextBillion.ai Maps GL)

Methods

Name	Description
`getElement()`	Returns the HTML element of the marker instance.
`moveTo({lng: number, lat: number}, speed: number)`	To move the marker to a set of coordinates with animation. A valid speed ranges from 0 to 10 (larger value means faster movement).
`remove()`	To remove the marker instance from the map.

Example

1
var marker = new nextbillion.maps.Marker({
2
  position: loc,
3
  map: map,
4
  // "title" is not available for NextBillion.ai Maps GL
5
  title: 'Hello World!',
6
  icon: 'gold',
7
})
8

9
// To listen to the click events and execute a callback
10
marker.getElement().addEventListener('click', (event) => {
11
  console.log('marker clicked', event)
12
})
13

14
// To move the marker to a new set of coordinates
15
marker.moveTo({ lng: 1, lat: 0 }, 9)