How to add Multiple Google Maps on one page?

Here is how you can generate multiple maps on the same page using Google Map API V3.

Multiple-Google-Map-by-Vivacity-InfoTech

Multiple-Google-Map

HTML


<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<div id="map_canvas2" style="width:700px; height:500px; margin-left:80px;" ></div>

JavaScript

<script type="text/javascript"> 
 var map,map2;

  function initialize(condition) {
  // create the map

var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

    map2 = new google.maps.Map(document.getElementById("map_canvas2"),
                                   myOptions);  
}



</script>

 Download Sample File

 

Advertisements