使用Colorbox.js使用谷歌地圖的Ajax請求

我想要使用Colorbox.js來動態加載谷歌地圖，當一個鏈接被點擊。因此，除非用戶決定查看更大的地圖，否則不需要預先加載地圖。

我的HTML測試看起來如下

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Map</title> 
    </head> 
    <body> 
    <a href="#googlemap" id="launch_map">Check out park on Google Maps</a> 
    <div id="location"> 
     <div class="map"></div> 
    </div> 


    <!-- Google Maps API --> 
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" 
type="text/javascript"></script> 


    <!-- Colorbox Ajax Request --> 
    <script type="text/javascript"> 

    $("#launch_map").colorbox({ 
     inline: true, 
     width:300, 
     height:200, 
     html:$("#location").html() 
    }); 

    var googleMap = $("#cboxLoadedContent").find("div.map")[0]; 
    var latlng = new google.maps.LatLng(44.537266, 123.250760); 
    var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
    var map = new google.maps.Map(googleMap, myOptions); 
    </script> 

    </body> 
</html>

我的問題是，它不會加載在彩盒的谷歌地圖。我希望有人能夠對我如何解決這個問題提供一些見解。

下面是一個JSFilddle我創建：工作無顏色框

來源

2012-07-10 Wasabi Developer