↑
Map Display

Exemplo 2 – Exibindo rota gerada pela Trip API

Neste exemplo é apresentado o resultado de uma rota entre 2 pontos próximos da Avenida Paulista no município de São Paulo.

Na variável apiKey, adicione sua chave recebida da Maplink.

A variável map é associada com a classe MaplinkMap e contém as propriedades do mapa, como a div onde será inicializado. Neste caso, não há localização inicial definida, assim o mapa será centralizado automaticamente quando for obtida a polilinha no método line.

O método map.line obtém as coordenadas latitude/longitude da resposta contendo a rota realizada pela Trip API e adiciona ao mapa com a cor verde..

O método map.marker adiciona um marcador no início e no fim. Como nenhum icon foi declarado, é exibido o marcador padrão da Maplink.

<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>