{"id":2404,"date":"2023-12-22T19:19:20","date_gmt":"2023-12-22T19:19:20","guid":{"rendered":"https:\/\/developers.maplink.global\/ejemplo-1-marcador-personalizado-con-popup\/"},"modified":"2024-03-04T14:31:16","modified_gmt":"2024-03-04T14:31:16","slug":"ejemplo-1-marcador-personalizado-con-popup","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/es\/ejemplo-1-marcador-personalizado-con-popup\/","title":{"rendered":"Ejemplo 1 – Marcador personalizado con popup"},"content":{"rendered":"\n

El siguiente ejemplo muestra una p\u00e1gina web con un marcador situado en la \u00abEstatua del Pescador\u00bb en el municipio de Santos, SP.<\/p>\n\n

En la variable apiKey<\/code>, a\u00f1ada la clave recibida de Maplink.<\/p>\n\n

La variable maplink<\/code> est\u00e1 asociada a la clase MaplinkMap<\/code> y contiene las propiedades del mapa, como div<\/code>, donde se inicializar\u00e1 y la ubicaci\u00f3n inicial.<\/p>\n\n

La variable icon<\/code> define las caracter\u00edsticas del marcador mediante el m\u00e9todo maplink.icon<\/code>.<\/p>\n\n

El m\u00e9todo maplink.marker<\/code> cargar\u00e1 el marcador en el mapa con el icono y la ventana emergente asociada.<\/p>\n\n

Si no se declara icon<\/code>, se mostrar\u00e1 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    <meta charset=\"utf-8\"\/>\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 maplink = new MaplinkMap(apiKey, \"map\", { center: [-23.986178, -46.308402] });\n \n          const icon = maplink.icon(\n              \"iconfinder_Marker_1891030.png\",\n              null,\n              {\n                  iconSize: [32, 32],\n                  shadowSize: [0, 0],\n                  iconAnchor: [20, 42],\n                  shadowAnchor: [0, 0],\n                  popupAnchor: [-3, -32]\n              });\n          maplink.marker({\n              latitude: -23.986437,\n              longitude: -46.308303\n          }, {\n              icon,\n              popup: \"<strong>Est\u00e1tua do Pescador<\/strong>\"\n          });\n    <\/script>\n  <\/body>\n<\/html><\/pre>\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
El siguiente ejemplo muestra una p\u00e1gina web con un marcador situado en la \u00abEstatua del Pescador\u00bb en el municipio de Santos, SP. En la variable apiKey, a\u00f1ada la clave recibida de Maplink. La variable maplink est\u00e1 asociada a la clase MaplinkMap y contiene las propiedades del mapa, como div, donde se inicializar\u00e1 y la ubicaci\u00f3n […]<\/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-2404","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\/2404","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=2404"}],"version-history":[{"count":3,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2404\/revisions"}],"predecessor-version":[{"id":2807,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/posts\/2404\/revisions\/2807"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/media?parent=2404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/categories?post=2404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/es\/wp-json\/wp\/v2\/tags?post=2404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}