Separate overlapped markers

Copy

var map;

function initMap() {
  map = new cercalia.Map({
    target: 'map',
    separateOverlapMarkersOnZoom: 15,
    center: new cercalia.LonLat(2.161607085, 41.391356967),
    zoom: 13,
    controls: []
  });

map.addMarker(new cercalia.Marker({
    position: new cercalia.LonLat(2.157070593, 41.400975825),
    icon: icon1
  }));
  map.addMarker(new cercalia.Marker({
    position: new cercalia.LonLat(2.157070593, 41.400975825),
    icon: icon2
  }));
  map.addMarker(new cercalia.Marker({
    position: new cercalia.LonLat(2.157070593, 41.400975825),
    icon: icon3
  }));

var i;
  for (i = 0; i < 7; i++) {
    map.addMarker(new cercalia.Marker({
      position: new cercalia.LonLat(2.148734227, 41.389591324)
    }));
  }

for (i = 0; i < 5; i++) {
    map.addMarker(new cercalia.Marker({
      position: new cercalia.LonLat(2.156567536, 41.396010996)
    }));
  }
}

document.addEventListener('cercalia-ready', initMap);

<!DOCTYPE html>
<html>
  <head>
    <title>Separate overlapped 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>
      var map;

      function initMap() {
        map = new cercalia.Map({
          target: 'map',
          separateOverlapMarkersOnZoom: 15,
          center: new cercalia.LonLat(2.161607085, 41.391356967),
          zoom: 13,
          controls: []
        });

        var icon1 = new cercalia.Icon({
          src: 'http://www.mappmycity.ca/Html5Viewer_2_0/Resources/Images/Icons/Toolbar/draw-circle-24.png'
        });
        var icon2 = new cercalia.Icon({
          src: 'http://www.mappmycity.ca/Html5Viewer_2_0/Resources/Images/Icons/Toolbar/draw-circle-24.png'
        });
        var icon3 = new cercalia.Icon({
          src: 'http://www.mappmycity.ca/Html5Viewer_2_0/Resources/Images/Icons/Toolbar/draw-circle-24.png'
        });


        map.addMarker(new cercalia.Marker({
          position: new cercalia.LonLat(2.157070593, 41.400975825),
          icon: icon1
        }));
        map.addMarker(new cercalia.Marker({
          position: new cercalia.LonLat(2.157070593, 41.400975825),
          icon: icon2
        }));
        map.addMarker(new cercalia.Marker({
          position: new cercalia.LonLat(2.157070593, 41.400975825),
          icon: icon3
        }));

        var i;
        for (i = 0; i < 7; i++) {
          map.addMarker(new cercalia.Marker({
            position: new cercalia.LonLat(2.148734227, 41.389591324)
          }));
        }

        for (i = 0; i < 5; i++) {
          map.addMarker(new cercalia.Marker({
            position: new cercalia.LonLat(2.156567536, 41.396010996)
          }));
        }
      }

      document.addEventListener('cercalia-ready', initMap);
    </script>
  </body>
</html>