$getScript 加载谷歌地图 API 的方法 - >空白页?



我的页面上有一个小按钮,应该加载谷歌地图。由于我希望我的页面加载速度非常快,并且此功能实际上不是必需的,因此我不想在页面加载时嵌入谷歌地图API脚本。我只想在实际单击按钮时加载它。

我尝试使用 jquery $.getScript() 方法,但是如果我使用上面的代码,我会得到一个空白页。页面开始加载,一旦我的javascript文件被执行,页面就是空白的(白色)。

$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    $('#googleMap').live('click', function(e) {
        e.preventDefault();
        loadMap("mapBottomContainer", false);
    });
});

我在这里做错了什么?

编辑/更新:

如果我这样做似乎没有区别:

$('#googleMap').live('click', function(e) {
    $.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
        e.preventDefault();
        loadMap("mapBottomContainer", false);
    });
});
页面

加载时不会变为空白,但是一旦我单击地图按钮,页面就会变白。

更新 2:

加载映射函数:

function loadMap(cont, scroll) {
    var latlng = new google.maps.LatLng(47.244236,11.249194);
    var options = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: scroll,
        streetViewControl: false,
        navigationControlOptions: {  
            style: google.maps.NavigationControlStyle.SMALL 
        }
    }
    var map = new google.maps.Map(document.getElementById(cont), options);
    var mapdesc = '<div id="gmContent">'+
    '<h3 id="gmTitle" class="widget-title">Something</h3>'+
    '<div id="gmBody">'+
    '</div>'+
    '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: mapdesc
    });
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'My Title'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
    infowindow.open(map,marker);
}

这里的问题是您正在加载的谷歌地图 api js 链接使用 document.write 向页面添加额外的脚本标签。这使得您尝试执行的操作变得不可能,因为它将覆盖页面内容。

js 脚本加载成功:

alert(window.google);   // before load undefined
$.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){
    alert(window.google); // after load [object Object]
});

但是,似乎google.maps没有您在loadMap中调用的某些属性,例如google.maps.LatLng

最新更新