↑
Map Display

Exemplo 1 – Marcador customizado com popup

O exemplo abaixo mostra uma página web com um marcador localizado na “Estátua do Pescador” no município de Santos, SP.

Na variável apiKey, adicione sua chave recebida da Maplink.

A variável maplink é associada com a classe MaplinkMap e contém as propriedades do mapa, como a div onde será inicializado e a localização inicial.

A variável icon define as características do marcador usando o método maplink.icon.

O método maplink.marker irá carregar o marcador no mapa com o icon e o popup associado.

Caso nenhum icon seja declarado, o marcador padrão da Maplink será exibido: 

<html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta charset="utf-8"/>
    <script src="https://maps.maplink.global"></script>
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type = "text/javascript">
          const apiKey = "SUA CHAVE DE API";
          const maplink = new MaplinkMap(apiKey, "map", { center: [-23.986178, -46.308402] });
 
          const icon = maplink.icon(
              "iconfinder_Marker_1891030.png",
              null,
              {
                  iconSize: [32, 32],
                  shadowSize: [0, 0],
                  iconAnchor: [20, 42],
                  shadowAnchor: [0, 0],
                  popupAnchor: [-3, -32]
              });
          maplink.marker({
              latitude: -23.986437,
              longitude: -46.308303
          }, {
              icon,
              popup: "<strong>Estátua do Pescador</strong>"
          });
    </script>
  </body>
</html>