Able to add shapes like Polyline, Circle in google map gives you the tool to add flight paths or locate specific location with circles. Using polylines can make you able to join multiple locations in a path specifically used to demonstrate flight path. In this program I have added three markers for three cities Delhi, Mumbai and Kolkata in the country India. And joined the three metropolitan with polyline and also added a circle for one of the city. I have also tried to add a click event listener for each cities though that part is still buggy and might not work properly. Also added info window for each markers. Here is the source code, you can try it.
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var delhi = new google.maps.LatLng(28.38000, 77.12000);
var kolkata = new google.maps.LatLng(22.572646,88.363895);
var mumbai = new google.maps.LatLng(18.9750, 72.8258);
var mapProp = {
center:delhi,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = [
new google.maps.Marker({
Name:'Mumbai Business Center',
position:mumbai,
animation:google.maps.Animation.BOUNCE
}),
new google.maps.Marker({
Name:'Delhi Capital of India',
position:delhi,
animation:google.maps.Animation.BOUNCE
}),
new google.maps.Marker({
Name:'Kolkata Heritage City',
position:kolkata,
animation:google.maps.Animation.BOUNCE
})
];
var flightPath = new google.maps.Polyline({
path:[mumbai,delhi,kolkata],
strokeColor: "#FF0000",
strokeOpacity:0.4 ,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
var myCity = new google.maps.Circle({
center:kolkata,
radius:50000,
strokeColor:"#FF0000",
strokeOpacity:0.5,
strokeWeight:2,
fillColor:"#FF0000",
fillOpacity:0.4
});
myCity.setMap(map);
for(i=0;i<marker.length;i++)
{
var m = marker[i];
m.setMap(map);
var infoWindow = new google.maps.InfoWindow({
content:m.Name
});
infoWindow.open(map,m);
google.maps.event.addListener(m,'click',function(){
map.setZoom(8);
map.setCenter(m.getPosition());
});
}
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:1200px; height:800px">
</div>
</body>
</html>
