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

时间:2012-02-13 03:15:38

标签: jquery ajax google-maps colorbox

我有一个页面可以将几个标记加载到谷歌地图上 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 Map 得到错误

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

main.js是谷歌地图主脚本

查找它似乎问题是Google Maps在尝试初始化时没有找到该元素 - 我通过与setTimeout绑定延迟调用后继续看到同样的错误

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

任何想法?

宁愿不诉诸静态图像,虽然我没有通过选项看到其他的东西

2 个答案:

答案 0 :(得分:2)

将地图嵌入到彩色框中,在生成的网址末尾添加选项“& output = embed”

如果你使用colorbox的iframe方法(对不起我的英文)

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

答案 1 :(得分:1)

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

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的元素是否实际存在。