• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

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

NameDescription
positionThe coordinates of the marker
mapThe map instance to which the marker attaches to
iconoptional 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'
titleoptional Add an HTML tooltip to the marker that shows on hovering

Default: ''

(Not available for NextBillion.ai Maps GL)

Methods

NameDescription
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

1var 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
10marker.getElement().addEventListener('click', (event) => {
11 console.log('marker clicked', event)
12})
13
14// To move the marker to a new set of coordinates
15marker.moveTo({ lng: 1, lat: 0 }, 9)

Have Questions ?