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

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)