Conditionally animating markers

Question

I have successfully built a map.

But I'd like to be able to choose whether or not any given Marker bounces or drops as it is placed on the map… typically to draw attention to one of two or three dozen Markers that are all visible simultaneously.

Defining the Marker's properties like this (from values held in an array) works perfectly:

1.  let marker = new google.maps.Marker(
2.      {
3.          map: map,
4.          position: array[i],
5.          title: array[i].title,
6.          *
7.      }
8.  );

How do I selectively add:

animation: google.maps.Animation.BOUNCE

on line 6, please?

My array already contains an item ("true" vs "false") for every object/item such that its logic - if my Marker code were like this - would either be null or contain the code to BOUNCE the Marker:

if (array[i].DropOrNot == "true") {
    set animation string to "animation: google.maps.Animation.DROP"
    }
    else {
    set animation string to ""
    }

IOW how do I conditionally display a Property of the Marker construct, please?

`Marker` has both a `setAnimation` and a `setOptions` method that can be used to set the animation after the marker was created. Otherwise use a ternary operator. — MrUpsidown, Jul 06 '22 at 10:02

geocodezip · Accepted Answer · 2022-07-06T03:43:08.017

You can use the ternary operator: ? : (to stop BOUNCE or avoid animation, use animation: null, [per the documentation]:

BOUNCE - Marker bounces until animation is stopped by calling Marker.setAnimation with null.

(https://developers.google.com/maps/documentation/javascript/reference/marker#Animation)

let marker = new google.maps.Marker({
  map: map,
  position: array[i],
  title: array[i].title,
  animation: array[i].DropOrNot ? google.maps.Animation.DROP : null
});

I think you might want "BOUNCE" rather than drop, but either works above.

code snippet (w/ BOUNCE):

function initMap() {
  const myLatLng = {
    lat: 40.7127753,
    lng: -74.0059728
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: myLatLng,
  });
  var array = [{
      lat: 40.735657,
      lng: -74.1723667,
      title: "Newark, NJ",
      DropOrNot: true
    },
    {
      lat: 40.7127753,
      lng: -74.0059728,
      title: "New York, NY",
      DropOrNot: false
    },
  ];
  for (var i = 0; i < array.length; i++) {
    let marker = new google.maps.Marker({
      map: map,
      position: array[i],
      title: array[i].title,
      animation: array[i].DropOrNot ? google.maps.Animation.BOUNCE : null
    });
  }
}
window.initMap = initMap;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Simple Markers</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>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>

</html>

Conditionally animating markers

1 Answers1