↑
Map Display

Example 1 – Custom marker with popup

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 and the starting location.

The variable icon defines the characteristics of the marker using the method maplink.icon.

The maplink.marker method will load the marker on the map with the icon and associated popup.

If no icon is declared, the default Maplink marker will be displayed: 

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