↑
Map Display

Example 2 – Displaying a route generated by the Trip API

This example shows the result of a route between 2 points near Avenida Paulista in the city of São Paulo.

In the variable apiKey, add your key received from Maplink.

The variable map is associated with the class MaplinkMap and contains the properties of the map, such as div where it will be initialized. In this case, there is no initial location defined, so the map will be centered automatically when the polyline is obtained in the method line.

The method map.line obtains the latitude/longitude coordinates of the response containing the route taken by the Trip API and adds it to the map in green.

The map.marker method adds a marker at the beginning and end. As no icon has been declared, the default Maplink marker is displayed.

<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://maps.maplink.global"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type = "text/javascript">
          const apiKey = "SUA CHAVE DE API";
          const map = new MaplinkMap(apiKey, "map");
          
          const tripSolution = JSON.parse(`{
          "id": "6099bda9059e8b46df94f8bc",
          "clientId": "SUA CHAVE DE API",
          "totalDistance": 737,
          "totalNominalDuration": 88,
          "averageSpeed": 30.15,
          "legs": [
               {
                    "distance": 737,
                    "nominalDuration": 88,
                    "averageSpeed": 30.15,
                    "points": [
                         {
                              "latitude": -23.56650175288036,
                              "longitude": -46.653812897469145
                         },
                         {
                              "latitude": -23.564855,
                              "longitude": -46.652203
                         },
                         {
                              "latitude": -23.561890765824277,
                              "longitude": -46.65578327260709
                         }
                    ]
               }
          ],
          "source": "MAPLINK",
          "createdAt": 1620688298404
          }`);
 
          const routePoints = tripSolution.legs[0].points;
 
          map.line(routePoints, {
               color: "green"
          });
 
          map.marker(routePoints[0], {
               popup: "<strong>Ponto de Partida</strong>"
          });
 
          map.marker(routePoints[routePoints.length - 1], {
               popup: "<strong>Ponto de Chegada</strong>"
          });
    </script>
  </body>
</html>