↑
Map Display

Ejemplo 1 – Marcador personalizado con popup

El siguiente ejemplo muestra una página web con un marcador situado en la «Estatua del Pescador» en el municipio de Santos, SP.

En la variable apiKey, añada la clave recibida de Maplink.

La variable maplink está asociada a la clase MaplinkMap y contiene las propiedades del mapa, como div, donde se inicializará y la ubicación inicial.

La variable icon define las características del marcador mediante el método maplink.icon.

El método maplink.marker cargará el marcador en el mapa con el icono y la ventana emergente asociada.

Si no se declara icon, se mostrará el marcador Maplink por defecto: 

<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>