4 maps on the same page

by Mahendran Sakkarai

HTML

<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>

JavaScript

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);
    })
}