Мульти маркеры в одном месте Google Maps

Question

Как разложить маркеры с одинаковыми координатами?

Мой код:

  function initialize() {

    var tasks = [
        [ 'title1', 44.833000, -0.567000, ],
        [ 'title2', 43.617000, 1.450000,],
        [ 'title3', 43.617000, 1.450000, ],
    ];

    var mapOptions = {zoom: 6, center: new google.maps.LatLng(46.8, 2),}

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < tasks.length; i++) {

      var latlng = new google.maps.LatLng(tasks[i][2], tasks[i][3]);

      var existingMarker = tasks[i];

      console.log(existingMarker)

      marker = new google.maps.Marker({ position: latlng, title: tasks[i][1], map: map });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() { infowindow.setContent(tasks[i][0]); infowindow.open(map, marker);} })(marker, i));
    }

  }

Как я могу сделать? (Я удалил код для примера)

Answer 1

Вам нужно:

1. сначала создайте кластерный маркер.

2. добавьте маркеры в MarkerClusterer (и отформатируйте свой код, чтобы его было легче читать...).

   function createMarker(latlng,text) {
     var marker = new google.maps.Marker({
       position: latlng,
       map: map
     });
   
     ///get array of markers currently in cluster
     var allMarkers = mc.getMarkers();
   
     //check to see if any of the existing markers match the latlng of the new marker
     if (allMarkers.length != 0) {
       for (i=0; i < allMarkers.length; i++) {
         var existingMarker = allMarkers[i];
         var pos = existingMarker.getPosition();
   
         if (latlng.equals(pos)) {
           text = text + " & " + content[i];
         }                   
       }
     }
   
     google.maps.event.addListener(marker, 'click', function() {
       infowindow.close();
       infowindow.setContent(text);
       infowindow.open(map,marker);
     });
     mc.addMarker(marker);
     return marker;
   }
   

рабочий пример

даже взгляните на https://github.com/jawj/OverlappingMarkerSpiderfier.