Open Aqeel111 opened 5 years ago
I've noticed a few people have run into this problem (myself included). This posted solution worked for me: https://github.com/jawj/OverlappingMarkerSpiderfier/issues/103#issuecomment-327900374
It's important that the un-minified version of the library is also used in order for this to work.
I am facing an issue while using the multiple markers label. Label does not appear while going to certain zoom level at first time whereas label appears when visiting that zoom level again. here is my code
var spiderConfig = { keepSpiderfied: true };
map = new google.maps.Map(document.getElementById('map'), { zoom: 3, center: { lat: globalLat, lng: globalLng }, draggable: true });
markercenter = new google.maps.Marker({ position: new google.maps.LatLng(globalLat, globalLng), map: map, icon: 'http://maps.google.com/mapfiles/ms/micons/arrow.png', zIndex: 10 });
map.addListener('dragend', function() { globalLat = map.getCenter().lat(); globalLng = map.getCenter().lng(); markercenter.setPosition( map.getCenter() ); });
map.addListener('zoom_changed', function() { globalZoom = map.getZoom(); markercenter.setPosition( map.getCenter() ); });
var markerSpiderfier = new OverlappingMarkerSpiderfier(map, spiderConfig);
markerSpiderfier.addListener('format', function(marker, status) { if (status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE || status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED){ marker.setLabel({ text: 'M', color: "#eb3a44",fontSize: "18px",fontWeight: "bold", verticalalign: "top"}); } });
for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), icon: pinSymbol(locations[i][3]), map: map });
myMarkers.push(marker);
markerSpiderfier.addMarker(marker);
google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i));
var markerCluster = new MarkerClusterer(map, myMarkers, { "imagePath": 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });
markerCluster.setMaxZoom(16);
This is the result I am looking at first glance
This is when I zoomed in
This is shown when I zoomed out.
P.S. I have tried both spider_click and spider_format with different MaxZoom values and I am zooming using the controls from map. Using spider_format results in appearing labels for all markers or label does not appear for any marker.