Menu
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?
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>
803
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.
133
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
