{"id":2802,"date":"2023-12-22T19:19:20","date_gmt":"2023-12-22T19:19:20","guid":{"rendered":"https:\/\/developers.maplink.global\/example-1-custom-marker-with-popup\/"},"modified":"2024-03-04T14:30:47","modified_gmt":"2024-03-04T14:30:47","slug":"example-1-custom-marker-with-popup","status":"publish","type":"post","link":"https:\/\/developers.maplink.global\/en\/example-1-custom-marker-with-popup\/","title":{"rendered":"Example 1 – Custom marker with popup"},"content":{"rendered":"\n

The example below shows a web page with a marker located at the “Fisherman’s Statue” in the municipality of Santos, SP.<\/p>\n\n

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

The variable maplink<\/code> is associated with the class MaplinkMap<\/code> and contains the properties of the map, such as div<\/code> where it will be initialized and the starting location.<\/p>\n\n

The variable icon<\/code> defines the characteristics of the marker using the method maplink.icon<\/code>.<\/p>\n\n

The maplink.marker<\/code> method will load the marker on the map with the icon and associated popup.<\/p>\n\n

If no icon<\/code> is declared, the default Maplink marker will be displayed: <\/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":"
The example below shows a web page with a marker located at the “Fisherman’s Statue” in the municipality of Santos, SP. In the variable apiKey, add your key received from Maplink. The variable maplink is associated with the class MaplinkMap and contains the properties of the map, such as div where it will be initialized […]<\/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-2802","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\/2802","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=2802"}],"version-history":[{"count":2,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2802\/revisions"}],"predecessor-version":[{"id":2806,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/posts\/2802\/revisions\/2806"}],"wp:attachment":[{"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/media?parent=2802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/categories?post=2802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/developers.maplink.global\/en\/wp-json\/wp\/v2\/tags?post=2802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}