加載多個谷歌地圖實例

Question

這是目前我的谷歌地圖實例加載到map div的方式。

我想添加另一個div與id map2，將舉行另一個谷歌地圖實例，我該怎麼做？

<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

如果你想通過JavaScript

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

document.body.innerHTML += map2; 

做到這一點然後調用您的初始化函數用不同的DIV ID ;,即MAP2;

編輯：你確定你沒有錯誤地調用函數嗎？

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