我有一个页面可以将几个标记加载到谷歌地图上 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);
});
任何想法?
宁愿不诉诸静态图像,虽然我没有通过选项看到其他的东西
答案 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的元素是否实际存在。