API - Directions

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

With NextBillion.ai Maps API, you can access all kinds of services from the map data to support your business, with just a few lines of code.

In this section, we'll introduce the Directions API.

The Directions API takes 2 locations as the origin and the destination, and returns the directions between them. You can set various traveling modes for a more accurate directions result.

You can use the SDK's built-in methods to request and render the result. Also, it's your freedom to manually process and visualize the data when needed.

There are detailed instructions in the references of Directions.

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
      #add-route {
17
        position: absolute;
18
        top: 20px;
19
        right: 20px;
20
        padding: 12px;
21
        z-index: 99;
22
      }
23
      #remove-route {
24
        position: absolute;
25
        top: 70px;
26
        right: 20px;
27
        padding: 12px;
28
        z-index: 99;
29
      }
30
    </style>
31
  </head>
32
  <body>
33
    <div id="map"></div>
34
    <button id="add-route">Request Direction</button>
35
    <button id="remove-route">Remove Direction</button>
36

37
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
38
    <script>
39
      ;(function () {
40
        nextbillion.setApiKey('your-api-key')
41
        // Optional: you can set the API host if it differs from "api.nextbillion.io"
42
        nextbillion.setApiHost('your-api-endpoint')
43
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
44
          zoom: 12,
45
          center: { lat: 28.6139, lng: 77.209 },
46
        })
47

48
        var directionShapes = null
49
        document.getElementById('add-route').onclick = async function () {
50
          if (directionShapes) {
51
            return
52
          }
53

54
          var resp = await nextbillion.api.Directions({
55
            origin: { lat: 24.9048329, lng: 74.5865747 },
56
            destination: { lat: 26.82585465, lng: 75.80178009 },
57
          })
58

59
          directionShapes = map.renderDirections(resp)
60
        }
61

62
        document.getElementById('remove-route').onclick = function () {
63
          if (!directionShapes) {
64
            return
65
          }
66
          map.removeDirections(directionShapes)
67
          directionShapes = null
68
        }
69
      })()
70
    </script>
71
  </body>
72
</html>