Add A Popup

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 allow you add a popup on a specific location on the map. Checkout the Popup API to learn more.

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
        var popup = new nextbillion.maps.Popup({
35
          position: loc,
36
          map: map,
37
          content: "Here's your Popup!",
38
        })
39
      })()
40
    </script>
41
  </body>
42
</html>