Javascript 使用api3的colorbox中有多个Google地图

我尝试在

colorbox.js

我有以下代码和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'
    });
}

$（文档）.ready（函数（）{
$（“#gmap0”）.色盒({
html:“”，
滚动：false，
宽度：“620px”，
高度：“420px”，
onComplete:function（）{
loadMap（）；
}
});
$（“#gmap1”）.颜色框({
html:“”，
滚动：false，
宽度：“620px”，
高度：“420px”，
onComplete:function（）{
loadMap（）；
}
});
$（“#gmap2”）.颜色框({
html:“”，
滚动：false，
宽度：“620px”，
高度：“420px”，
onComplete:function（）{
loadMap（）；
}
});
函数loadMap（）
{
var mylatng0=新的google.maps.LatLng（48.1614448,11.6986405）；
变量映射选项0={
缩放：15，
中心：myLatlng0
}
var map0=new google.maps.Map（document.getElementById（'mapPane0'），mapOptions0）；
var marker0=新的google.maps.Marker({
位置：myLatlng0，
地图：map0，
标题：“xxxxxx”
});
var mylatng1=新的google.maps.LatLng（49.897942,10.894587）；
变量映射选项1={
缩放：15，
中心：myLatlng1
}
var map1=new google.maps.Map（document.getElementById（'mapPane1'），maoptions1）；
var marker1=新的google.maps.Marker({
位置：myLatlng1，
地图：地图1，
标题：“xxxxx”
});
var mylatng2=新的google.maps.LatLng（52.5237997,13.4025625）；
变量映射选项2={
缩放：15，
中心：myLatlng2
}
var map2=new google.maps.Map（document.getElementById（'mapPane2'），maoptions2）；
var marker2=新的google.maps.Marker({
位置：myLatlng2，
地图:map2,，
标题：“xxxxxx”
});
}

我将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' 
      });
}