How to Display Multiple Google Maps per page with API V3

Question

I have the following script. And I want to make both maps appear on the page, but no matter what I try I can only get the first map initialize() to display... the second one doesn't. Any suggestions? (also, I can't add it in the code, but the first map is being displayed in <div id="map_canvas"></div><div id="route"></div> Thanks!

<script type="text/javascript">  // Create a directions object and register a map and DIV to hold the  // resulting computed directions  var map; var directionsPanel; var directions;  function initialize() {   map = new GMap(document.getElementById("map_canvas"));   map.setCenter(new GLatLng(41.1255275,-73.6964801), 15);   directionsPanel = document.getElementById("route");   directions = new GDirections(map, directionsPanel);   directions.load("from: Armonk Fire Department, Armonk NY to: <?php echo $LastCallGoogleAddress;?> ");    map.addControl(new GSmallMapControl());   map.addControl(new GMapTypeControl()); }  </script>    <div id="map_canvas2" style="width:200px; height:200px;"></div> <div id="route2"></div>  <script type="text/javascript">  // Create a directions object and register a map and DIV to hold the  // resulting computed directions  var map2; var directionsPanel2; var directions2;  function initialize2() {   map2 = new GMap(document.getElementById("map_canvas2"));   map2.setCenter(new GLatLng(41.1255275,-73.6964801), 15);   directionsPanel2 = document.getElementById("route2");   directions2 = new GDirections(map2, directionsPanel2);   directions2.load("from: ADDRESS1 to: ADDRESS2 ");    map2.addControl(new GSmallMapControl());   map2.addControl(new GMapTypeControl()); }  </script>   <script type="text/javascript"> function loadmaps(){     initialize();     initialize2();   } </script> 

Answer 1

Here is how I have been able to generate multiple maps on the same page using Google Map API V3. Kindly note that this is an off the cuff code that addresses the issue above.

The HTML bit

<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 for map initialization

<script type="text/javascript"> var map, map2;  function initialize(condition) {     // create the maps     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>  

Answer 2

I have just finished adding Google Maps to my company's CMS offering. My code allows for more than one map in a page.

Notes:

• I use jQuery
• I put the address in the content and then parse it out to dynamically generate the map
• I include a Marker and an InfoWindow in my map

HTML:

<div class="block maps first">     <div class="content">         <div class="map_canvas">             <div class="infotext">                 <div class="location">Middle East Bakery & Grocery</div>                 <div class="address">327 5th St</div>                 <div class="city">West Palm Beach</div>                 <div class="state">FL</div>                 <div class="zip">33401-3995</div>                 <div class="country">USA</div>                 <div class="phone">(561) 659-4050</div>                 <div class="zoom">14</div>             </div>         </div>     </div> </div> <div class="block maps last">     <div class="content">         <div class="map_canvas">             <div class="infotext">                 <div class="location">Global Design, Inc</div>                 <div class="address">3434 SW Ash Pl</div>                 <div class="city">Palm City</div>                 <div class="state">FL</div>                 <div class="zip">34990</div>                 <div class="country">USA</div>                 <div class="phone"></div>                 <div class="zoom">17</div>             </div>         </div>     </div> </div> 

Code:

$(document).ready(function() {     $maps = $('.block.maps .content .map_canvas');     $maps.each(function(index, Element) {         $infotext = $(Element).children('.infotext');          var myOptions = {             'zoom': parseInt($infotext.children('.zoom').text()),             'mapTypeId': google.maps.MapTypeId.ROADMAP         };         var map;         var geocoder;         var marker;         var infowindow;         var address = $infotext.children('.address').text() + ', '                 + $infotext.children('.city').text() + ', '                 + $infotext.children('.state').text() + ' '                 + $infotext.children('.zip').text() + ', '                 + $infotext.children('.country').text()         ;         var content = '<strong>' + $infotext.children('.location').text() + '</strong><br />'                 + $infotext.children('.address').text() + '<br />'                 + $infotext.children('.city').text() + ', '                 + $infotext.children('.state').text() + ' '                 + $infotext.children('.zip').text()         ;         if (0 < $infotext.children('.phone').text().length) {             content += '<br />' + $infotext.children('.phone').text();         }          geocoder = new google.maps.Geocoder();         geocoder.geocode({'address': address}, function(results, status) {             if (status == google.maps.GeocoderStatus.OK) {                 myOptions.center = results[0].geometry.location;                 map = new google.maps.Map(Element, myOptions);                 marker = new google.maps.Marker({                     map: map,                     position: results[0].geometry.location,                     title: $infotext.children('.location').text()                 });                 infowindow = new google.maps.InfoWindow({'content': content});                 google.maps.event.addListener(map, 'tilesloaded', function(event) {                     infowindow.open(map, marker);                 });                 google.maps.event.addListener(marker, 'click', function() {                     infowindow.open(map, marker);                 });             } else {                 alert('The address could not be found for the following reason: ' + status);             }         });     }); });