Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Marker animation is removed when you zoom in or out #384

Open
mikeartix opened this issue Jun 30, 2022 · 4 comments
Open

Marker animation is removed when you zoom in or out #384

mikeartix opened this issue Jun 30, 2022 · 4 comments
Assignees
Labels
triage me I really want to be triaged. type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns.

Comments

@mikeartix
Copy link

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

@mikeartix mikeartix added triage me I really want to be triaged. type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns. labels Jun 30, 2022
@amuramoto amuramoto assigned amuramoto and unassigned wangela Aug 8, 2022
@amuramoto
Copy link
Member

@mikeartix Please add a code sample

@mikeartix
Copy link
Author

@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>

@amuramoto
Copy link
Member

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.

@mikeartix
Copy link
Author

Thanks for looking into it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage me I really want to be triaged. type: bug Error or flaw in code with unintended results or allowing sub-optimal usage patterns.
Projects
None yet
Development

No branches or pull requests

3 participants