Javascript GoogleMaps API Animation Onclick for Array of points

Question

I've searched the web but can't seem to locate an answer for my issue. I believe I'm close but just can't get this to work as intended.

I'd like to plot an array of locations on a google map and start with the DROP animation, then when a user clicks a point, I'd like it to bounce.

My current code does 1/2 the job, however, when you click it's targeting the last value in my array. The BOUNCE animation works but it doesn't seem to be applied to all values in my array. Can you point at what I'm missing in the code?

Thanks for all the help!

<html>
<head>
    <!-- styles put here, but you can include a CSS file and reference it instead! -->
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
    // Create a map variable
    var map;
    var markers = [];
    // Function to initialize the map within the map div
    function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 40.74135, lng: -73.99802},
            zoom: 10
        });
        // Create a single latLng literal object.
        var locations = [
            {title: 'Beer', location: new google.maps.LatLng(47.666633, -122.371453)},
            {title: 'Home', location: new google.maps.LatLng(47.613141, -122.320587)},
            {title: 'Work', location: new google.maps.LatLng(47.624812, -122.315134)}
        ];

        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < locations.length; i++) {
            var position = locations[i].location;
            var title = locations[i].title;
            var marker = new google.maps.Marker({
                map: map,
                position: position,
                title: title,
                animation: google.maps.Animation.DROP,
                id: i
            });
            bounds.extend(marker.position);
            google.maps.event.addListener(marker, 'click', function(){
                if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                } else {
                    marker.setAnimation(google.maps.Animation.BOUNCE);
                }
            });
//            markers.push(marker);
        }
        map.fitBounds(bounds);
    }
</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=&v=3&callback=initMap">
</script>
</body>
</html>

score 0 · Accepted Answer · answered May 18 '17 at 20:45

0

One option would be to use this inside the click event listener function to reference the clicked marker.

google.maps.event.addListener(marker, 'click', function(){
     if (this.getAnimation() !== null) {
         this.setAnimation(null);
      } else {
         this.setAnimation(google.maps.Animation.BOUNCE);
      }
});

(you can also use function closure)

answered May 18 '17 at 20:45

geocodezip

158,664
13
220
245

Thank you! I'm still a little lost on why my current code didn't work. I found this for reference: https://jsfiddle.net/ergec/8kdx7az6/ When I compare this code to the original code I posted I can't see why theirs works and mine doesn't. If you have time, could you explain or point me to any articles that could help? – Axel May 18 '17 at 21:30
The `marker` variable is left pointing to the last marker, to fix it (as I said in my answer), either use the `this` inside the click listener or use function closure to associate the marker variable with the click listener (see an example in the infowindow code in [the answer to this related question](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example)) – geocodezip May 18 '17 at 22:47
The fiddle has function closure to solve the problem (the `createMarker` function has closure on the `marker` variable), you removed the function, and thereby lost the closure in your code (the "Simple Multiple Marker" question I reference uses an anonymous function to get the closure on marker/infowindow) – geocodezip May 18 '17 at 23:11

Javascript GoogleMaps API Animation Onclick for Array of points

1 Answers1