{"id":2808,"date":"2023-12-22T19:48:27","date_gmt":"2023-12-22T19:48:27","guid":{"rendered":"https:\/\/developers.maplink.global\/example-2-displaying-a-route-generated-by-the-trip-api\/"},"modified":"2024-03-04T14:32:18","modified_gmt":"2024-03-04T14:32:18","slug":"example-2-displaying-a-route-generated-by-the-trip-api","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/en\/example-2-displaying-a-route-generated-by-the-trip-api\/","title":{"rendered":"Example 2 – Displaying a route generated by the Trip API"},"content":{"rendered":"\n

This example shows the result of a route between 2 points near Avenida Paulista in the city of S\u00e3o Paulo.<\/p>\n\n

<\/p>\n\n

In the variable apiKey<\/code>, add your key received from Maplink.<\/p>\n\n

The variable map<\/code> is associated with the class MaplinkMap<\/code> and contains the properties of the map, such as div<\/code> 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<\/code>.<\/p>\n\n

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

The map.marker<\/code> method adds a marker at the beginning and end. As no icon<\/code> has been declared, the default Maplink marker is displayed.<\/p>\n\n

<html>\n  <head>\n    <meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" \/>\n    <script src=\"https:\/\/maps.maplink.global\"><\/script>\n    <style>\n      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}\n    <\/style>\n  <\/head>\n  <body>\n    <div id=\"map\"><\/div>\n    <script type = \"text\/javascript\">\n          const apiKey = \"SUA CHAVE DE API\";\n          const map = new MaplinkMap(apiKey, \"map\");\n          \n          const tripSolution = JSON.parse(`{\n          \"id\": \"6099bda9059e8b46df94f8bc\",\n          \"clientId\": \"SUA CHAVE DE API\",\n          \"totalDistance\": 737,\n          \"totalNominalDuration\": 88,\n          \"averageSpeed\": 30.15,\n          \"legs\": [\n               {\n                    \"distance\": 737,\n                    \"nominalDuration\": 88,\n                    \"averageSpeed\": 30.15,\n                    \"points\": [\n                         {\n                              \"latitude\": -23.56650175288036,\n                              \"longitude\": -46.653812897469145\n                         },\n                         {\n                              \"latitude\": -23.564855,\n                              \"longitude\": -46.652203\n                         },\n                         {\n                              \"latitude\": -23.561890765824277,\n                              \"longitude\": -46.65578327260709\n                         }\n                    ]\n               }\n          ],\n          \"source\": \"MAPLINK\",\n          \"createdAt\": 1620688298404\n          }`);\n \n          const routePoints = tripSolution.legs[0].points;\n \n          map.line(routePoints, {\n               color: \"green\"\n          });\n \n          map.marker(routePoints[0], {\n               popup: \"<strong>Ponto de Partida<\/strong>\"\n          });\n \n          map.marker(routePoints[routePoints.length - 1], {\n               popup: \"<strong>Ponto de Chegada<\/strong>\"\n          });\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
This example shows the result of a route between 2 points near Avenida Paulista in the city of S\u00e3o 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[169],"tags":[],"class_list":["post-2808","post","type-post","status-publish","format-standard","hentry","category-map-display-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/comments?post=2808"}],"version-history":[{"count":1,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2808\/revisions"}],"predecessor-version":[{"id":2809,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2808\/revisions\/2809"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/media?parent=2808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/categories?post=2808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/tags?post=2808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}