Make A Map

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

To start with NextBillion.ai Maps, we'll initialize a new Map instance. It's as easy as breeze. With a Map instance, you can add markers, draw shapes, add tooltips, and calling the APIs such as Direction, Distance Matrix and Snap To Roads and so many more. Feel free to edit the sample code below to play around.

Examples

Plain HTML

To use NextBillion.ai Maps in a plain HTML project, simply reference the assets from our CDN and you are ready to go.

You can use the code below to render a map like this:

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>NBMap Basic Example</title>
6
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7
    <style>
8
      * {
9
        margin: 0;
10
        padding: 0;
11
      }
12
      #map {
13
        width: 100vw;
14
        height: 100vh;
15
      }
16
    </style>
17
  </head>
18
  <body>
19
    <div id="map"></div>
20
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
21
    <script>
22
      ;(function () {
23
        nextbillion.setApiKey('your-api-key')
24
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
25
          zoom: 12,
26
          center: { lat: 28.6139, lng: 77.209 },
27
        })
28
      })()
29
    </script>
30
  </body>
31
</html>

React.js

To use NextBillion.ai Maps with React.js, you can install the package nbmap-gl and import it to your project.

You can use the code below to render the same map as above:

1
import React, { useEffect } from 'react'
2
import nextbillion from 'nbmap-gl'
3
import 'nbmap-gl/dist/nextbillion.css'
4
import './App.css'
5

6
nextbillion.setApiKey('your-api-key')
7

8
function App() {
9
  useEffect(() => {
10
    new nextbillion.maps.Map(document.getElementById('map'), {
11
      zoom: 12,
12
      center: { lat: 28.6139, lng: 77.209 },
13
    })
14
  }, [])
15
  return <div id='map'></div>
16
}
17

18
export default App

1
* {
2
  margin: 0;
3
  padding: 0;
4
}
5

6
#map {
7
  width: 100vw;
8
  height: 100vh;
9
}