API - Distance Matrix

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 Distance Matrix API.

The Distance Matrix API takes several locations as the origins and the destinations, and returns the distances between each other. You can set various options, such as traveling modes, for a more accurate distance result.

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

There are detailed instructions in the references of Distance Matrix.

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
        // Optional: you can set the API host if it differs from "api.nextbillion.io"
25
        nextbillion.setApiHost('your-api-endpoint')
26
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
27
          zoom: 12,
28
          center: { lat: 28.6139, lng: 77.209 },
29
        })
30

31
        async function requestDistanceMatrix() {
32
          var resp = await nextbillion.api.DistanceMatrix({
33
            origins: [
34
              { lat: 13.01751434, lng: 77.60704545 },
35
              { lat: 13.00580657, lng: 77.61116532 },
36
              { lat: 13.00396673, lng: 77.63142137 },
37
            ],
38
            destinations: [
39
              { lat: 12.9720182, lng: 77.55005387 },
40
              { lat: 12.95963913, lng: 77.64738587 },
41
              { lat: 12.93789063, lng: 77.61339692 },
42
            ],
43
            mode: '4w',
44
          })
45

46
          requestDistanceMatrix()
47

48
          // check out the response in the browser's console
49
          console.log(resp)
50
        }
51
      })()
52
    </script>
53
  </body>
54
</html>