带有api3的彩盒中的多个Google地图

Question

我尝试使用colorbox.js

中的标记打开Goog​​le地图

我有以下代码和map0工作。但map1和map2什么都没有显示。

任何人都会看到我做错了什么？

    $(document).ready(function(){
      $("#gmap0").colorbox({
        html: '<div id="mapPane0" class="mapClass"></div>',
        scrolling: false,
        width: "620px",
        height: "420px",
        onComplete: function(){
          loadMap();
      }
    });

    $("#gmap1").colorbox({
        html: '<div id="mapPane1" class="mapClass"></div>',
        scrolling: false,
        width: "620px",
        height: "420px",
        onComplete: function(){
          loadMap();
      }
    });

    $("#gmap2").colorbox({
        html: '<div id="mapPane2" class="mapClass"></div>',
        scrolling: false,
        width: "620px",
        height: "420px",
        onComplete: function(){
          loadMap();
      }
    });


    function loadMap()
    {

    var myLatlng0 = new google.maps.LatLng(48.1614448,11.6986405);
    var mapOptions0 = {
      zoom: 15,
      center: myLatlng0         
    }
    var map0 = new google.maps.Map(document.getElementById('mapPane0'), mapOptions0);
    var marker0 = new google.maps.Marker({
      position: myLatlng0,
      map: map0,
      title: 'xxxxxx'
    });

    var myLatlng1 = new google.maps.LatLng(49.897942,10.894587);
    var mapOptions1 = {
      zoom: 15,
      center: myLatlng1         
    }
    var map1 = new google.maps.Map(document.getElementById('mapPane1'), mapOptions1);
    var marker1 = new google.maps.Marker({
      position: myLatlng1,
      map: map1,
      title: 'xxxxx'
    });

    var myLatlng2 = new google.maps.LatLng(52.5237997,13.4025625);
    var mapOptions2 = {
      zoom: 15,
      center: myLatlng2         
    }
    var map2 = new google.maps.Map(document.getElementById('mapPane2'), mapOptions2);
    var marker2 = new google.maps.Marker({
      position: myLatlng2,
      map: map2,
      title: 'xxxxxx'
    });
}

Answer 1

我通过将loadMap函数更改为：

来自行修复它

function loadMap(key, lat, lon, title)
{   
      var myLatlng = new google.maps.LatLng(lat,lon);
      var mapOptions = {
        zoom: 15,
        center: myLatlng
      }
      var elementId = 'mapPane' + key;
alert(elementId);
      var map = new google.maps.Map(document.getElementById(elementId), mapOptions);
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'xxxx' 
      });
}