"Why does this bubble not dance?" asked my friend's 6 year old sister referring to a marker she was seeing on the map! So I decided the this marker needs to be animated! So, I developed the following code which shows a marker that bounces on its position and can also be dragged anywhere on the map!
The following is the code for the "dancing marker"...
<html>
<head>
<title>Google Maps JavaScript API v3 - Bouncing marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById("map"),
{
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(22.7964,79.5410)
});
marker = new google.maps.Marker(
{
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(22.7964,79.5410)
});
google.maps.event.addListener(marker, 'click', markerBounce);
}
function markerBounce()
{
if (marker.getAnimation() != null)
marker.setAnimation(null);
else
marker.setAnimation(google.maps.Animation.BOUNCE);
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
The dancing marker from the above code looks as seen in the image below!
The following is the code for the "dancing marker"...
<html>
<head>
<title>Google Maps JavaScript API v3 - Bouncing marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById("map"),
{
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(22.7964,79.5410)
});
marker = new google.maps.Marker(
{
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(22.7964,79.5410)
});
google.maps.event.addListener(marker, 'click', markerBounce);
}
function markerBounce()
{
if (marker.getAnimation() != null)
marker.setAnimation(null);
else
marker.setAnimation(google.maps.Animation.BOUNCE);
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 500px; height: 400px;">map div</div>
</body>
</html>
The dancing marker from the above code looks as seen in the image below!
The code to make the marker bounce and move is not at all very special. It's just an adjustment of the marker properties as you can see in the code! I have just changed the dragging property of the marker to true and added the animation property as well.
If you have any suggestion regarding the contents of the blog, please drop your comments here or feel free to drop me a mail!
Comments
Post a Comment
Please leave your comments here...