Charger plusieurs instances google map

Question

Ceci est actuellement la façon dont je charge mon instance google map dans le div map.

Je voudrais ajouter une autre div avec l'ID map2 qui contiendra une autre instance de google maps, comment puis-je faire cela?

<script type="text/javascript"> 
    var map; 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(33.33333,44.44444); 
    var myOptions = { 
     zoom: 14, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"), myOptions); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"If this is your exact location, press \"Add this location\"" 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(8); 
    }); 
    } 


</script> 
<div id="map"></div> 

Answer 1

Si vous voulez le faire via javascript

var map2 = document.createElement('div'); 
map2.id = "map2"; 

document.body.innerHTML += map2; 

Ensuite, appelez votre fonction initialize avec un autre div id ;, par exemple map2;

EDIT: Êtes-vous sûr de ne pas appeler la fonction de manière incorrecte?

<script type="text/javascript"> 

    function initialize(mapNum) { 
    var map; 
    var myLatlng = new google.maps.LatLng(33.33333,44.44444); 
    var myOptions = { 
     zoom: 14, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map"+mapNum), myOptions); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title:"If this is your exact location, press \"Add this location\"" 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(8); 
    }); 
    } 


initialize(1); 
initialize(2); 

</script> 
<div id="map1"></div> 
<div id="map2"></div>