Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 803
Ashwin Parmar Avatar asked Sep 14 '13 05:09

Ashwin Parmar


2 Answers

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.

like image 133
Motionharvest Avatar answered Oct 25 '22 08:10

Motionharvest


    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);
like image 25
Hussy Borad Avatar answered Oct 25 '22 08:10

Hussy Borad