Move a 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
Once a marker has been added to the map, you can later move it with a set of coordinates. The marker shall move with a built-in animation to the destination coordinates. Click on the map to see it in action.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta name="viewport" content="initial-scale=1.0" />
5 <meta charset="UTF-8" />
6 <title>Basic Map</title>
7 <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
8 <!-- Or use the legacy version: -->
9 <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
10 <style>
11 * {
12 margin: 0;
13 padding: 0;
14 }
15 #map {
16 width: 100vw;
17 height: 100vh;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="map"></div>
23 <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
24 <!-- Or use the legacy version: -->
25 <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
26 <script>
27 ;(function () {
28 var loc = { lat: 28.6139, lng: 77.209 }
29 nextbillion.apiKey = 'your-api-key'
30 var map = new nextbillion.maps.Map(document.getElementById('map'), {
31 zoom: 11,
32 center: loc,
33 })
34 // Adding a marker to the map
35 var marker = new nextbillion.maps.Marker({
36 position: loc,
37 map: map,
38 })
39
40 map.on('click', (event) => {
41 const { lng, lat } = event.lngLat
42 // You can set speed to other than 9. The valid values are 0~10 (larger means faster).
43 marker.moveTo({ lng, lat }, 9)
44 })
45 })()
46 </script>
47 </body>
48</html>Custom Marker
Draw Some Shapes
