Search code examples
javascripttypescriptgoogle-mapsgoogle-maps-api-3google-maps-markers

Google maps marker DROP animation is inconsistent

I am using the google maps API in angular 10, and I am finding some inconsistencies with toggling a DROP animation.

The JSFiddle on the official documenation has a demo toggling the bounce animation.

However, my use case is having multiple markers on a map, each time a marker is clicked, it will DROP in (not bounce). I've tried altering the JSFiddle to make this work by adding a second marker to the map and using a toggle for both.

I can't find a lot of documentation on the Marker.animation and Marker.animating properties for the different animations. I suspect that when a marker has the DROP animation, these 2 properties are set to null after the animation has completed.

marker.addListener('click', () => marker.setAnimation(google.maps.Animation.DROP))

The above does not work.

Solution

  • To get the marker to drop again, set the map property to null (removing it from the map), then set the animation again, and add the marker to the map.

    marker.setMap(null);
marker.setAnimation(google.maps.Animation.DROP);
marker.setMap(map);

    proof of concept fiddle

    code snippet:

    // The following example creates a marker in Stockholm, Sweden using a DROP
// animation. Clicking on the marker will toggle the animation between a BOUNCE
// animation and no animation.
let marker;

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 13,
    center: {
      lat: 59.325,
      lng: 18.07
    },
  });
  marker = new google.maps.Marker({
    map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: {
      lat: 59.327,
      lng: 18.067
    },
  });
  marker.addListener("click", function() {
    toggleDrop(map);
  });
}

function toggleDrop(map) {
  marker.setMap(null);
  marker.setAnimation(google.maps.Animation.DROP);
  marker.setMap(map);
}
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Marker Animations</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" async></script>
</body>

</html>