![](\"https:\/\/lh7-us.googleusercontent.com\/rTS5cYahM4Pm-D48qXRBLXVAydxkDZs7A_peAkpTtL8WgleZAHBNziwnEhK_r_KSuaMR2EsHzMGBGX_qDk1xQzwHbrdq4Sf7PphdnYZY-VjI7hQcxK7TU7rQEM3RUskvxfKjBXx-mnXxNNXgQWkCBoY\"\/)
<\/p>\n\nThe following example shows two routes generated by Trip API in the region of Santos, SP.<\/p>\n\n
The variable The method The route responses were defined in the variables The The following example shows two routes generated by Trip API in the region of Santos, SP. 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 […]<\/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-2810","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\/2810","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=2810"}],"version-history":[{"count":1,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2810\/revisions"}],"predecessor-version":[{"id":2811,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2810\/revisions\/2811"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/media?parent=2810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/categories?post=2810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/tags?post=2810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}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\nmap.lines<\/code> obtains the latitude\/longitude coordinates of the response containing the routes taken by the Trip API with random colors, since it has none defined. <\/p>\n\ntripSolution1<\/code> and tripSolution2<\/code> and added to the array of the variable routes<\/code>.<\/p>\n\nmap.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\n const tripSolution1 = JSON.parse(`{\n \"totalDistance\": 367,\n \"legs\": [\n {\n \"distance\": 367,\n \"points\": [\n {\n \"latitude\": -23.983273,\n \"longitude\": -46.299793\n },\n {\n \"latitude\": -23.982123,\n \"longitude\": -46.299857\n },\n {\n \"latitude\": -23.982008,\n \"longitude\": -46.299494\n },\n {\n \"latitude\": -23.982425,\n \"longitude\": -46.299191\n },\n {\n \"latitude\": -23.98223,\n \"longitude\": -46.298604\n },\n {\n \"latitude\": -23.982033,\n \"longitude\": -46.298145\n },\n {\n \"latitude\": -23.981830,\n \"longitude\": -46.298312\n }\n ]\n }\n ],\n \"source\": \"MAPLINK\"\n }`);\n\n\n const tripSolution2 = JSON.parse(`{\n \"totalDistance\": 466,\n \"legs\": [\n {\n \"distance\": 466,\n \"points\": [\n {\n \"latitude\": -23.983253,\n \"longitude\": -46.296054\n },\n {\n \"latitude\": -23.983809,\n \"longitude\": -46.296797\n },\n {\n \"latitude\": -23.983358,\n \"longitude\": -46.297131\n },\n {\n \"latitude\": -23.982925,\n \"longitude\": -46.297421\n },\n {\n \"latitude\": -23.982033,\n \"longitude\": -46.298145\n },\n {\n \"latitude\": -23.981792,\n \"longitude\": -46.297682\n },\n {\n \"latitude\": -23.981549,\n \"longitude\": -46.297285\n },\n {\n \"latitude\": -23.981672,\n \"longitude\": -46.297487\n }\n ]\n }\n ],\n \"source\": \"MAPLINK\"\n }`);\n\n\n const routes = [tripSolution1, tripSolution2].map(trip => trip.legs[0].points);\n map.lines(routes);\n\n\n\n\n for (const route of routes) { \n map.marker({\n latitude: route[0].latitude,\n longitude: route[0].longitude\n });\n\n\n map.marker({\n latitude: route[route.length - 1].latitude,\n longitude: route[route.length - 1].longitude\n });\n }\n <\/script>\n <\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"