javascript - 加载多个谷歌 map 实例

目前，这是我将Google地图实例加载到map div中的方式。

我想添加另一个ID为map2的div来保存另一个Google Maps实例，该怎么办？

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

最佳答案

如果您想通过javascript执行此操作

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

document.body.innerHTML += map2;

然后使用不同的div ID调用您的initialize函数；即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>

关于javascript - 加载多个谷歌 map 实例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5398056/