加载多个谷歌地图实例

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>