js-markerclusterer
js-markerclusterer copied to clipboard
Published
20 hours ago •
googlemaps
googlemaps
Marker animation is removed when you zoom in or out
Hi!
As you can see in the video, the marker animation (bounce animation in this case) is removed once you zoom in or out. After I zoom in, markers that haven't been added to clusters lose their animation, meanwhile, the markers that get revealed from clusters have their animation, but once I zoom in again, they lose it too.
https://www.youtube.com/watch?v=n1S9Kx3UocI
@amuramoto here you go
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
<body>
<div id="map" style="height: 800px"></div>
<script>
function init() {
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 25.765005, lng: -80.243797 },
zoom: 10,
});
const locations = [
{name: 'Dade County', coords: {lat: 25.76500500, lng: -80.24379700}},
{name: 'E Fort Lauderdale', coords: {lat: 26.13793600, lng: -80.13943500}},
{name: 'Pembroke Pines', coords: {lat: 26.00998700, lng: -80.29447200}},
{name: 'Coconut Grove', coords: {lat: 25.73629600, lng: -80.24479700}},
{name: 'N Miami/Biscayne', coords: {lat: 25.88674000, lng: -80.16329200}},
];
const markers = [];
for(const loc of locations) {
const marker = new google.maps.Marker({
map,
position: loc.coords,
title: loc.name,
animation: google.maps.Animation.BOUNCE,
});
markers.push(marker);
}
const clusterer = new markerClusterer.MarkerClusterer({map, markers});
}
</script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init"></script>
</body>
</html>
Thanks for this! I think I've identified the issue. We switched to SuperCluster as the default renderer, which converts the markers to GeoJSON for its clustering algorithm then converts that back to Marker instances, so some of the marker options don't get carried across. Haven't yet determined if there's a good solution to this, but I'm looking into it.