Version:

Create markers

Create markers

Create markers

<!DOCTYPE html>
<html>
  <head>
    <title>Create markers</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      document.addEventListener('cercalia-ready', init);

      function init() {
        var map = new cercalia.Map({
          target:'map'
        });

        var arrayMarkers = [];

        var markerBcn = new cercalia.Marker({
          position: new cercalia.LonLat(2.165802217, 41.392919622),
          popup: new cercalia.Popup({
            title: 'Ciutat de Barcelona',
            content: '<div style="width:300px"><b>Lorem Ipsum</b> és un text de farciment usat per la indústria de la tipografia i la impremta. ' +
              'Lorem Ipsum ha estat el text estàndard de la indústria des de l\'any 1500, quan un impressor desconegut' +
              'va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques.</div>',
            minWidth: 200,
            maxWidth: 600,
            visible: true,
            fadeAnimation: false
          }),
          infoMap: new cercalia.InfoMap({
            title: 'Info',
            content: '<h1>Content....</h1><br/><b>hola</b>'
          }),
          onClick: function(marker) {
            marker.showInfoMap();
          }
        });


        var markerMadrid = new cercalia.Marker({
          position: new cercalia.LonLat(-3.715090655, 40.426123994),
          icon: new cercalia.Icon({
            src: 'img/cercalia-marker-icon-A.png' ,
            anchor: [14, 38]
          }),
          label: new cercalia.Label({
            text: 'Hola'
          }),
          draggable: true
        });


        var markerSevilla = new cercalia.Marker({
          position: new cercalia.LonLat(-6.005183775, 37.38),
          icon: new cercalia.Icon({
            src: 'img/cercalia-marker-icon-B.png' ,
            opacity: 0.5,
            anchor: [14, 38]
          })
        });

        arrayMarkers.push(markerBcn);
        arrayMarkers.push(markerMadrid);
        arrayMarkers.push(markerSevilla);

        //Añadimos markers al mapa
        map.addMarkers(arrayMarkers);

      }
    </script>
  </body>
</html>