function initialize()
{
var latlng = new google.maps.LatLng(28.612900,77.229458);
var myOptions =
{
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myOptions2 =
{
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var myOptions3 =
{
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var myOptions4 =
{
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
var map4 = new google.maps.Map(document.getElementById("map_canvas_4"), myOptions4);
google.maps.event.addListener(map, "zoom_changed", function()
{
zoomLevel = map.getZoom();
map2.setZoom(zoomLevel);
map3.setZoom(zoomLevel);
map4.setZoom(zoomLevel);
})
google.maps.event.addListener(map, "drag", function()
{
centre = map.getCenter();
map2.setCenter(centre);
map3.setCenter(centre);
map4.setCenter(centre);
})
}
<html>
<title>Google Maps API v3 Example - Four maps and event handling</title>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
<!-- Copy the Javascript code here in case you are trying out the code -->
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="top: 5px; left: 30px; width:200px; height:200px; float: left"></div>
<div id="map_canvas_2" style="top: 5px; left: 75px; width:200px; height:200px"></div>
<div id="map_canvas_3" style="top: 55px; left: 30px; width:200px; height:200px; float: left"></div>
<div id="map_canvas_4" style="top: 55px; left: 75px; width:200px; height:200px"></div>
</body>
</html>