OverlappingMarkerSpiderfier
OverlappingMarkerSpiderfier copied to clipboard
Change color of marker that has multiple marker underneath it.
I am wondering how to change color of marker that has multiple markers behind to make it different than a single marker. For example, I have like 20 markers on the same spot, I want it color red, but I am also having other single markers that scattering different spot, they has the color yellow. User can easily notice that under the red marker has multiple other markers. When user click on the red marker, it will unspiderfy to 20 other markers, and those markers are in yellow because they are exposing to single marker.
I would like to know how can I do that. Thank you
I have the same problem!
I have solved the problem in another way by changing the position of the underneath markers. This is not the best solution, but I solve the problem for the moment.
The following code changes the position of spiderfied markers minimally. So, the user can see that at a given point there are more markers overlapped.
marker = new google.maps.Marker({
position: ...,
...
});
if(oms.markersNearMarker(marker, true).length) {
lat = marker.getPosition().lat() + (Math.random() - .5) / 2000; // 1500
lng = marker.getPosition().lng() + (Math.random() - .5) / 2000; // 1500
lat_lng = new google.maps.LatLng(lat, lng);
marker.setPosition(lat_lng);
};
The following works for me.
oms.addListener('spiderfy', function (markers) {
for(i=0;i<markers.length;i++){
markers[i].setIcon('icon.png');
}
});
oms.addListener('unspiderfy', function (markers) {
for(i=0;i<markers.length;i++){
markers[i].setIcon('icon_plus.png');
}
});
google.maps.event.addListener(map, 'idle', function(){
var stuff = oms.markersNearAnyOtherMarker();
for(i=0;i<stuff.length;i++){
stuff[i].setIcon('icon_plus.png');
}
});
Edit:
Let's explain. markersNearAnyOtherMarker can only be run after idle. So we put an event-listener to the map to get that. Then we change the icon for every marker to the "plus"-icon. The normal icon is icon.png. Then when we spiderfy we change the icon to the normal one, because having "plus"-icons there would be confusing. Then when we unspiderfy we change them back to the "plus"-icon.