Bounce a pin in google maps once

Question

I want to bounce a pin on a google map once. The following code will make the marker bounce but it just keeps going...

myPin.setAnimation(google.maps.Animati         


        

Answer 1

At the moment there is no built in animation for bouncing once.

If you are OK with it bouncing twice then i strongly suggest that you use this:

marker.setAnimation(4);

Answer 2

This is a tough one with no perfect answer yet because, while 750ms works fine for a desktop browser, it does look stunted on a mobile device. Google has not really added much to the animation API, so there's no solutions via API.

The best I've been able to accomplish is to set the timeout value to 900ms, it looks the same on Desktop because it exploits the 150ish ms that the icon pauses between each bounce, and gives a laggy mobile device some extra breathing space for animation time.

Edit: My solution stopped working for me suddenly. Oops. If you're doing this on mobile, might just be best to not bother with the bounce at all.

Answer 3

I have found that in order for a pin to stop animating after a bounce is completed, you need to make the pin draggable. The best way I have found to do this is by using two timeouts:

1. to remove the animation before the first bounce is complete.
2. to make the marker not draggable after the first bounce is complete.

Animations will stop once you make a marker not draggable. I have created a plunker to show what I mean: http://plnkr.co/edit/Gcns3DMklly6UoEJ63FP?p=preview

The HTML

    <div id="map-canvas"></div>
    <p>
      Bounce marker
      <select id="bounceNumber">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
      times.
      <button onclick="bounceMarker()">Go!</button>
    </p>

The JavaScript

var marker = null,
    toBounce = null,
    toDrag = null;

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(-25.363882, 131.044922)
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(-25.363882, 131.044922),
        map: map
    });
}

function bounceMarker() {
    var select = document.getElementById("bounceNumber"),
        bounces = parseInt(select.options[select.selectedIndex].value),
        animationTO = (bounces - 1) * 700 + 350,
        dragTO = animationTO + 1000;

    // Bounce the marker once
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
        clearTimeout(toBounce);
        clearTimeout(toDrag);
        setTimeout(function () {
            marker.setDraggable(false);
        }, 750);
    } else {
        // Workaround to make marker bounce once.
        // The api will finish the current bounce if a marker is set to draggable.
        // So use two timeouts:
        // 1. to remove the animation before the first bounce is complete.
        // 2. to make the marker not draggable after the first bounce is complete.
        // Animations will stop once you make a marker not draggable.
        marker.setDraggable(true);
        marker.setAnimation(google.maps.Animation.BOUNCE);
        toBounce = setTimeout(function () {
            marker.setAnimation(null);
        }, animationTO);
        toDrag = setTimeout(function () {
            marker.setDraggable(false);
        }, dragTO);
    }
}


google.maps.event.addDomListener(window, 'load', initialize);

For as far as I am aware this works cross browser. I have tested in chrome, firefox, safari & opera. I haven't tested this in internet explorer yet.

Answer 4

Just a note: if you're triggering this on multiple markers, you'll want to check to make sure the marker's not currently animating by adding the following code before you call marker.setAnimation( google.maps.Animation.BOUNCE );:

if( marker.animating ) { return; }

Answer 5

Bit of a simple approach: Google's bounce animation appears to take exactly 750 ms for one cycle. Thus, simply set the timeout to 750 ms and the animation will stop exactly at the end of the first bounce. Works for me on FF 7, Chrome 14 and IE 8:

    marker.setAnimation(google.maps.Animation.BOUNCE);
    setTimeout(function(){ marker.setAnimation(null); }, 750);

Answer 6

use this code:

animation:google.maps.Animation.DROP