jawj / OverlappingMarkerSpiderfier

Deals with overlapping markers in Google Maps JS API v3, Google Earth-style
http://blog.mackerron.com
836 stars 238 forks source link

Multiple markers label does not appear at first glance #164

Open Aqeel111 opened 5 years ago

Aqeel111 commented 5 years ago

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 no multiple marker label

This is when I zoomed in multiple marker label in zoomed view

This is shown when I zoomed out. zoomed back multiple marker appears

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.

Jollus174 commented 2 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.