Hi
Just completed RnD for sample demo for Google MAP API with multiple position, animated icon and Infowindow
It’s Plain HTML with Google Map API v3
This will useful for PHP or .net
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 900px }
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #990000;
}
#topheader{
height: 30px;
text-align:center;
}
#topheader a{
padding: 5px 25px;
}
</style>
<script type="text/javascript">
var India = new google.maps.LatLng(18.593684,79.96288);
var neighborhoods = [ // as many position you can add
new google.maps.LatLng(19.0176147, 72.8561644),
new google.maps.LatLng(23.0395677, 72.5660045),
new google.maps.LatLng(21.15576, 79.089111),
new google.maps.LatLng(28.635308, 77.22496)
];
var neighborhoodsName = [ // as many title respective to your position
"Mumbai",
"Ahmdabad",
"Nagpur",
"Delhi"
];
var neighborhoodsDescription = [ / as many Description respective to your position
"<p>Mumbai great city in India<a href='http://www.bwsipl.com'>Click Here</a></p>",
"<p>Ahmdabad great city in India</p>",
"<p>Nagpur great city in India</p>",
"<p>Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India Delhi great city in India </p>"
];
var markers = [];
var iterator = 0;
var image = new google.maps.MarkerImage('beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));;
var shadow = new google.maps.MarkerImage('beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var map;
function initialize() {
var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: India
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
for (var i = 0; i < neighborhoods.length; i++) {
// setTimeout(function() {
// addMarker(i);
// }, i * 200);
var marker = new google.maps.Marker({
position: neighborhoods[i],
map: map,
draggable: false,
icon: image,
title: neighborhoodsName[i],
shadow: shadow,
animation: google.maps.Animation.DROP
});
attachMessage(marker, i);
/* var infowindow = new google.maps.InfoWindow(
{ content: neighborhoodsDescription[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
*/ }
// drop();
}
function attachMessage(marker, number) {
var message = ["This","is","the","secret","message"];
var infowindow = new google.maps.InfoWindow(
{ content: neighborhoodsDescription[number]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
var infowindow = new google.maps.InfoWindow();
function openmapwindow(number){
//google.maps.InfoWindow.close();
//infowindow.close();
infowindow.open(map);
infowindow.setContent(neighborhoodsDescription[number]);
infowindow.setPosition(neighborhoods[number]);
}
</script>
</head>
<body onLoad="initialize()">
<div id="topheader">
<button id="drop" onClick="drop()">Drop Markers</button>
<a href="#" onClick="Javascript:openmapwindow(0);">Mumbai </a> | <a href="#" onClick="Javascript:openmapwindow(1);">Ahmdabad</a> | <a href="#" onClick="Javascript:openmapwindow(2);">Nagepur </a> | <a href="#" onClick="Javascript:openmapwindow(3);">Delhi</a></div>
<div id="map_canvas" >map div</div>
</body>
</html>
