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