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.pngDefault: 'green' |
| title | optional Add an HTML tooltip to the marker that shows on hoveringDefault: '' (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
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)Map
Polygon
