How to add custom animation on Google Map V3 Marker when I drop each marker one by one?

Question

This my simple working example of Drop each marker one-by-one on Google map V3. I have set the Drop Animation when marker is added to Google Map.

But I want to customize the Drop with Fade Animation will it possible using any Javascript Stuff or other library?

Google has this options in Namespace Can we add our Custom animation options in Namespace?

google.maps.Animation.DROP
google.maps.Animation.BOUNCE
google.maps.Animation.CUSTOM_FADE ( Is it possible ? )

My Working Code for Google map V3

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    function marker(i) {
        if (i > locations.length) return;

        var marker;

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            animation: google.maps.Animation.DROP,
            map: map
            });

        var t=setTimeout("marker("+(i+1)+")",500);
    }
    marker(0);

  </script>
</body>
</html>

animation: function() will not work because it is constant value should be there. — Ashwin Parmar, Sep 14 '13 at 06:01

Motionharvest · Answer 1 · 2013-09-19T00:30:12.073

Here is how far I've gotten. Google Maps API adds a CSS Keyframe snippet on the page from inside of http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/14/4/%7Bcommon,map,util,marker%7D.js

inside the page it looks something like this

@-webkit-keyframes _gm2657 {
0 % {
    -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out;
}
50 % {
    -webkit-transform: translate3d(0px, -20px, 0); -webkit-animation-timing-function: ease-in ;
}
100 % {
    -webkit-transform: translate3d(0px, 0px, 0); -webkit-animation-timing-function: ease-out;
}

}

The function in there is compressed to

function uJ(a, b) {
var c = [];
c[A]("@-webkit-keyframes ", b, " {\\n");
K(a.b, function (a) {
    c[A](100 * a[$k], "% { ");
    c[A]("-webkit-transform: translate3d(", a[Fv][0], "px,", a[Fv][1], "px,0); ");
    c[A]("-webkit-animation-timing-function: ", a.wa, "; ");
    c[A]("}\\n")
});
c[A]("}\\n");
return c[Mc]("")
}

I can't dig through that any more right now to figure out how to hack into that object.

The trouble is that I don't know how they build that keyframe animation name. I've gotten as far as a.d="_gm"+l[B](1E4*l[Qb]()) from the file above, but good luck tracking that one back up to what l[B] is or what object 1E4*l equates to, or how Qb is defined.

My next route would be to scrape the HTML for script tags containing @-webkit-keyframes _gm and see about extracting the number used, then using it to write your own keyframe animation, and hope that google maps uses your injected CSS instead of its own.

Along those lines I wrote a little jQuery method to search for all divs with a style attribute partially matching "_gm".

var poll;
var ntrvl = setInterval(function () {
    poll = $("div[style*=' _gm']");
    if (poll.length > 0) {
        craftNewAnimation(poll.css('-webkit-animation-name'));
        clearInterval(ntrvl);
    }

}, 10);

function craftNewAnimation(name) {
    console.log(name);
    var markup = ['<style>',
        '@-webkit-keyframes ' + name + ' {',
        '0%{ opacity: 0; }',
        '100%{ opacity: 1; }',
        '}',
        '</style'
    ];
    $('body').append(markup.join(""));
}

http://jsbin.com/uJAdaJA/3/edit

It doesn't replace the first one it detect's animation for some reason. And there might be other ways to get that magic keyframe-name without so much hacking.

Good luck.

Good effort thanks When I change to animation: 2 It will little flicker can we do smooth here — Ashwin Parmar, Sep 19 '13 at 04:48
Might be a better idea to use another Mapping application with a better API, like maybe Mapbox. — Motionharvest, Sep 20 '13 at 16:32
I have seen Mapbox will it provide all the functionality as Gmap V3 Provide? Like adding Dynemic Markers with Different Images. Marker Animation Add Circle / Polygon on Map Find value from Circle Navigation? StreetView — Ashwin Parmar, Sep 21 '13 at 06:34
My suggestion to use Mapbox was based on the specific desire to customize a pin drop. The Mapbox API is fairly robust. Take a look at the examples, and go through the API to see if it does what you want. Honestly, I'd just sacrifice the custom pin animation, or figure out how to hack into the Google Map API and get that magic css keyframe identifier. — Motionharvest, Sep 23 '13 at 15:45
@Cmndo Your recommendation (http://jsbin.com/uJAdaJA/3/edit) is used for Chrome browser. For firefox and explorer, only bounce effect is seen. How can we use fade effect for firefox and explorer? — séan35, May 15 '15 at 12:04

score 2 · Answer 2 · answered Aug 13 '14 at 09:52

    var locations = [
      ['Surat', 21.205386, 72.847301, 4],
      ['Mumbai', 19.068789, 72.870265, 5]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: new google.maps.LatLng(20.120783, 71.8517917),
      mapTypeId: google.maps.MapTypeId.ROADMAP,

    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        draggable:true,
        animation: google.maps.Animation.DROP,
        animation: google.maps.Animation.BOUNCE,    
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
        var bounds = new google.maps.LatLngBounds();
// in the marker-drawing loop:
bounds.extend(pos);
// after the loop:
map.fitBounds(bounds);

score 2 · Answer 3 · edited May 23 '17 at 11:47

You can use Google's rich marker utility which allows you to use html elements as markers. now you can give the element a css animation as you like, e.g. using daneden's Animate.css.

An example:

    var pictureLabel = document.createElement("img");
    pictureLabel.src = YOUR_SOURCE;
    pictureLabel.width = SOME_WIDTH;
    pictureLabel.height = SOME_HEIGHT;
    // daneden even got the exact animation your'e looking for :)
    pictureLabel.className = pictureLabel.className + " animated fadeInDown";

    var marker = new RichMarker({
    position: new google.maps.LatLng(YOUR_LAT, YOUR_LNG),
        map: YOUR_MAP,
        content: pictureLabel
    });

If you use Google's rich marker, don't forget to use it's click bug fix!

How to add custom animation on Google Map V3 Marker when I drop each marker one by one?

3 Answers3

Linked