Two maps on the same page

by designworksinteractive

HTML

<title>Google Maps API v3 - Two maps side-by-side</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
</script>

<body onload="initialize()">
<H1 align="center">three  Google maps side-by-side</h1>
<div id="map_canvas" style="top: 10px; padding-left:35px; padding-right:35px; width:33%; height:220px; float: left"></div>
<div id="map_canvas_2" style="top:10px; padding-left:25px; padding-right:35px; width:33%; height:220px"></div>
<div id="map_canvas_3" Style="top:10px; left:175px; width:33%; height:220px"></div>

</body>

JavaScript

function initialize()
{
    var latlng = new google.maps.LatLng(18.520266,73.856406);
    var latlng2 = new google.maps.LatLng(28.579943,77.330006);
    var latlng3 = new google.maps.LatLng(28.579943,77.330006);
      var latlng4 = new google.maps.LatLng(18.520266,73.856406);
    var myOptions =
    {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions2 =
    {
        zoom: 15,
        center: latlng2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myOptions3 =
    {
        zoom: 3,
        center: latlng3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
 
    };

    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 myMarker = new google.maps.Marker(
    {
        position: latlng,
        map: map,
        title:"Pune"
   });

    var myMarker2 = new google.maps.Marker(
    {
        position: latlng2,
        map: map2,
        title:"Noida"
    });
    
    var myMarker3 = new google.maps.Marker(
    {
        position: latlng3,
        map: map3,
        title:"Noida"
                });
    
        var myMarker4 = new google.maps.Marker(
    {
        position: latlng4,
        map: map3,
        title:"Noida"
      });
}