OverlappingMarkerSpiderfier icon indicating copy to clipboard operation
OverlappingMarkerSpiderfier copied to clipboard

Change color of marker that has multiple marker underneath it.

Open tenznhok opened this issue 7 years ago • 3 comments

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

tenznhok avatar Oct 05 '16 13:10 tenznhok

I have the same problem!

phlegx avatar Nov 23 '16 19:11 phlegx

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);
};
 

phlegx avatar Nov 24 '16 11:11 phlegx

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.

wgroenewold avatar Jan 18 '17 15:01 wgroenewold