![](\"https:\/\/lh7-us.googleusercontent.com\/cULMIgHCJUF1WWJSZcB649ewvydyxZn0HzWO98lAr_9SqsuNjuwuxPXnkKToYHhv1_cIUbtntA5e-dfxip2OoKizTxFNKv1TMO5gZfyWKWky2ECMOFpr1tbO5XYVyEptCp8tnWb-OKSZyXZ8g5uvc5Y\"\/)
<\/p>\n\nEste ejemplo muestra el resultado de una ruta entre dos puntos cercanos a la Avenida Paulista de la ciudad de S\u00e3o Paulo.<\/p>\n\n
En la variable La variable El m\u00e9todo El m\u00e9todo Este ejemplo muestra el resultado de una ruta entre dos puntos cercanos a la Avenida Paulista de la ciudad de S\u00e3o Paulo. En la variable apiKey, a\u00f1ada la clave recibida de Maplink. 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, […]<\/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-2408","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\/2408","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=2408"}],"version-history":[{"count":3,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2408\/revisions"}],"predecessor-version":[{"id":2411,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2408\/revisions\/2411"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/media?parent=2408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/categories?post=2408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/tags?post=2408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}apiKey<\/code>, a\u00f1ada la clave recibida de Maplink.<\/p>\n\nmap<\/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.line<\/code> obtiene las coordenadas de latitud\/longitud de la respuesta que contiene la ruta realizada por la Trip API y las a\u00f1ade al mapa en color verde.<\/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 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":"