• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Add 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

NextBillion.ai Maps comes with a built-in marker that you can add to the maps directly. Checkout the Marker API to learn more.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>Basic Map</title>
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
    <!-- Or use the legacy version: -->
    <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
    <!-- Or use the legacy version: -->
    <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
    <script>
      ;(function () {
        var loc = { lat: 28.6139, lng: 77.209 }
        nextbillion.apiKey = 'your-api-key'
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
          zoom: 11,
          center: loc,
        })
        // Adding a marker to the map
        var marker = new nextbillion.maps.Marker({
          position: loc,
          map: map,
        })
      })()
    </script>
  </body>
</html>