![](\"https:\/\/lh7-us.googleusercontent.com\/rTS5cYahM4Pm-D48qXRBLXVAydxkDZs7A_peAkpTtL8WgleZAHBNziwnEhK_r_KSuaMR2EsHzMGBGX_qDk1xQzwHbrdq4Sf7PphdnYZY-VjI7hQcxK7TU7rQEM3RUskvxfKjBXx-mnXxNNXgQWkCBoY\"\/)
<\/p>\n\nEl siguiente ejemplo muestra dos rutas generadas por Trip API en la regi\u00f3n de Santos, SP.<\/p>\n\n
La variable El m\u00e9todo Las respuestas de ruta se definieron en las variables El m\u00e9todo El siguiente ejemplo muestra dos rutas generadas por Trip API en la regi\u00f3n de Santos, SP. La variable map est\u00e1 asociada a la clase MaplinkMap y contiene las propiedades del mapa, como div donde se inicializar\u00e1. En este caso, no hay una ubicaci\u00f3n inicial definida, por lo que el mapa se centrar\u00e1 autom\u00e1ticamente cuando se […]<\/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":[157],"tags":[],"class_list":["post-2412","post","type-post","status-publish","format-standard","hentry","category-map-display-es"],"acf":[],"_links":{"self":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/comments?post=2412"}],"version-history":[{"count":1,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2412\/revisions"}],"predecessor-version":[{"id":2413,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2412\/revisions\/2413"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/media?parent=2412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/categories?post=2412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/tags?post=2412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}map<\/code> est\u00e1 asociada a la clase MaplinkMap<\/code> y contiene las propiedades del mapa, como div<\/code> donde se inicializar\u00e1. En este caso, no hay una ubicaci\u00f3n inicial definida, por lo que el mapa se centrar\u00e1 autom\u00e1ticamente cuando se obtenga la polil\u00ednea en el m\u00e9todo line<\/code>.<\/p>\n\nmap.lines<\/code> obtiene las coordenadas de latitud\/longitud de la respuesta que contiene las rutas realizadas por la Trip API con colores aleatorios, ya que no tiene ninguna definida. <\/p>\n\ntripSolution1<\/code> y tripSolution2<\/code> y se a\u00f1adieron a la matriz de la variable routes<\/code>.<\/p>\n\nmap.marker<\/code> a\u00f1ade un marcador al principio y al final. Como no se ha declarado ning\u00fan icon<\/code>, se muestra el marcador Maplink por defecto.<\/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":"