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=""
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>
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(marker) { // Do something Possible ? } – Ashwin Parmar Commented Sep 14, 2013 at 5:21
- animation: function() will not work because it is constant value should be there. – Ashwin Parmar Commented Sep 14, 2013 at 6:01
3 Answers
Reset to default 5Here 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.
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);
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!