javascript - Overlapping Pointers with MarkerClustererPlus and OverlappingMarkerSpiderfier

Question

I have this map and displaying pointers based on users long and lat. now i have a problem with OverlappingMarkerSpiderfier. when there are more than 1 users with same long and lat. for example: 5 people live in the same building. i need OverlappingMarkerSpiderfier to show the count and then on click to sipderfy it. by default, OverlappingMarkerSpiderfier doesnt work that way.

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52, 8),
        zoom: 4
    };
    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var oms = new OverlappingMarkerSpiderfier(map,{markersWontMove: true, markersWontHide: true, keepSpiderfied: true});

    markerClusterer.setMap(map);

here is the jsfiddle http://jsfiddle.net/gL3L7zso/62/

as you can see, when i click the battefield 3. its showing 1 pointer behind it hiding 3. i need it to be the same but, display the count of pointers hiding behind.

appreciate any solution for this.

update: to make the question more clear.

updated fiddle: http://jsfiddle.net/gL3L7zso/68

Answer 1

One option would be to put a label on each marker in the "cluster", and put the highest labeled marker on top.

oms.addMarker(marker);
var markersNear = oms.markersNearMarker(marker, false);
marker.setLabel("" + (markersNear.length + 1));
marker.setOptions({
  zIndex: markersNear.length
});

proof of concept fiddle

code snippet:

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Bielefeld"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Bielefeld3"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.528849, 52.030656]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Herford"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.676780, 52.118003]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.383353, 51.902917]
    }
  }, {
    "type": "Feature",
    "properties": {
      "name": "Guetersloh2"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [8.38, 51.9]
    }
  }]
};
var map = null;
var bounds = new google.maps.LatLngBounds();

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
  content: boxText,
  disableAutoPan: false,
  maxWidth: 0,
  pixelOffset: new google.maps.Size(-140, 0),
  zIndex: null,
  boxStyle: {
    background: "url('tipbox.gif') no-repeat",
    opacity: 0.75,
    width: "280px"
  },
  closeBoxMargin: "10px 2px 2px 2px",
  closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
  infoBoxClearance: new google.maps.Size(1, 1),
  isHidden: false,
  pane: "floatPane",
  enableEventPropagation: false
});

var markerClusterer = new MarkerClusterer(map, [], {imagePath: "https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m"});
    minClusterZoom = 14;
    markerClusterer.setMaxZoom(minClusterZoom);
    

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(52.030656,8.528849),
    zoom: 14
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  google.maps.event.addListenerOnce(map, 'idle', function() {
    var oms = new OverlappingMarkerSpiderfier(map, {
      markersWontMove: true,
      markersWontHide: true,
          keepSpiderfied: true
        });
    oms.addListener('unspiderfy', function(spidered, unspidered) {
      for (var i = 0; i < spidered.length; i++) {
        spidered[i].setLabel("" + (i + 1));
        spidered[i].setOptions({
          zIndex: i
        });
      }
    });
    markerClusterer.setMap(map);
    google.maps.event.addListener(map.data, 'addfeature', function(e) {
      if (e.feature.getGeometry().getType() === 'Point') {
        var marker = new google.maps.Marker({
          position: e.feature.getGeometry().get(),
          title: e.feature.getProperty('name'),
          map: map
        });
        google.maps.event.addListener(marker, 'click', function(marker, e) {
          return function() {

            var myHTML = e.feature.getProperty('name');
            boxText.innerHTML = "<div style='text-align: center;'><b>" + myHTML + "</b></div>";
            infobox.setPosition(e.feature.getGeometry().get());
            infobox.setOptions({
              pixelOffset: new google.maps.Size(0, 0)
            });
            infobox.open(map);
          };
        }(marker, e));
        markerClusterer.addMarker(marker);
        oms.addMarker(marker);
        google.maps.event.addListener(map, 'idle', function() {
        var markersNear = oms.markersNearMarker(marker, false);
        marker.setLabel("" + (markersNear.length + 1));
        marker.setOptions({
          zIndex: markersNear.length
        });
        });
      }
    });
    layer = map.data.addGeoJson(geoJson);
    map.data.setMap(null);
    google.maps.event.addListener(map, "click", function() {
      infobox.close();
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.min.js"></script>
<div id="map"></div>