不止一个谷歌地图在颜色框与API3

Question

我尝试在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' 
    }); 
} 

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