将 Google Map 加载到 Colorbox AJAX 加载的内容中

Question

我有一个页面将多个标记加载到谷歌地图上 http://solarpanelhost.org/garden/

当你点击一个标记时，它会使用 Colorbox 进行 AJAX 调用

// locations is a multi dimensional array containing lat/lon/URL
// for the markers and ajax call

google.maps.event.addListener(marker, 'click', (function(marker, i){
    return function() {
        $.colorbox({
            href: locations[i][3]
            ,width: '80%'
            ,height: '80%'
            ,onComplete: singleMap(locations[i][0], locations[i][1], 'project_map_single', icon, 8)
        });
    }
})(locations, i));


function singleMap(lat, lon, id, icon, zoom) {
    icon = typeof icon !== 'undefined' ? icon : 'logo-flower-icon.png';
    zoom = typeof zoom !== 'undefined' ? zoom : 8;
    var myOptions = {
        zoom: zoom
        ,center: new google.maps.LatLng(lat, lon)
        ,mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById(id), myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng
        ,map: map
        ,icon: '/static/images/'+icon
    });
} 

我无法使用 onComplete 回调加载 Google 地图 出现错误

a is null -- main.js (line 30)

main.js 是谷歌地图的主脚本

查了一下，问题似乎是谷歌地图在尝试初始化时没有找到该元素——在通过与 setTimeout 绑定延迟添加调用后，我继续看到同样的错误

$(document).bind('cbox_complete', function(){
    setTimeout(singleMap(36, -105, 'project_map_single'), 10000);
});

有什么想法吗？

宁愿不使用静态图像，尽管我没有看到太多其他选项

Answer 1

要将地图嵌入到颜色框中，请在生成的 url 末尾添加选项“&output=embed”

如果您使用的是颜色框的 iframe 方法（对不起我的英语）

<a href="http://maps.google.com/maps/generatedurl...&output=embed" class="gmap">gmap<a>  

Answer 2

这可能不是您遇到的问题的解决方案，但以下是错误的：

onComplete: singleMap(locations[i][0], locations[i][1], 'project_map_single', icon, 8)

这将立即执行 singleMap 函数，并将其值返回给 onComplete 属性。你想传递 onComplete 一个函数来执行，而不是一个函数的返回值。所以你会做这样的事情：

onComplete: function(){ singleMap(locations[i][0], locations[i][1], 'project_map_single', icon, 8); }

如果您仍然收到错误，这不应该是因为无法找到#project_map_single。仔细检查颜色框中显示的标记，以验证具有该 ID 的元素确实存在。