jpoehnelt
commented
4 years ago Looking at the implementation, the only thing I see different about what you are doing is calling map.panToBounds. markerCluster.fitMapToMarkers does not pan, it only fits the bounds.
https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds https://developers.google.com/maps/documentation/javascript/reference/map#Map.panToBounds
Hi,
We are building a vue app which loads the google maps java script api and employs the marker cluster plus library to display the pins on the map. The collection of lat-long coordinates are retrieved using a Rest api call and after that collection of markers are formed and then added to the marker cluster. Applying the below piece of code works correctly most times but in some cases the map is panned to incorrect bounds. The version we are using is - "@google/markerclustererplus": "^5.0.4"
import MarkerClusterer from '@google/markerclustererplus' ... ... ... if (self.markerCluster) { self.markerCluster.addMarkers(markers) self.markerCluster.fitMapToMarkers() }
We are able to overcome this sporadic behavior by explicitly calculating the bounds and controlling the panning by employing the below code: self.markerCluster.addMarkers(markers) const allMarkers = self.markerCluster.getMarkers() const bounds = new self.google.maps.LatLngBounds() allMarkers.forEach((marker) => bounds.extend(marker.getPosition())) self.map.fitBounds(bounds) self.map.panToBounds(bounds)
Please have a look.