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>