$ getScript Метод для загрузки Google Maps API -> пустая страница? - PullRequest
3 голосов
/ 06 мая 2011

У меня есть маленькая кнопка на моей странице, которая должна загрузить карту Google.Поскольку я хочу, чтобы моя страница загружалась очень быстро, а эта функция на самом деле не нужна, я не хочу вставлять скрипт API карт Google при загрузке страницы.Я просто хочу загрузить его, когда кнопка фактически нажата.

Я попытался использовать метод jquery $ .getScript (), однако, если я использую код выше, я получаю пустую страницу.Страница начинает загружаться, и как только мой файл JavaScript запускается, страница становится пустой (белой).

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

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });
});

Что я здесь не так делаю?

edit / update:

Похоже, что если я сделаю это, не будет иметь значения:

$('#googleMap').live('click', function(e) {

    $.getScript("http://maps.google.com/maps/api/js?sensor=false", function(){

        e.preventDefault();
        loadMap("mapBottomContainer", false);

    });

});

Страница не становится пустой при загрузке страницы, однако, как только я нажимаю кнопку карты, страница отбеливается.

обновление 2:

функция loadMap:

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);

}

Ответы [ 2 ]

8 голосов
/ 06 мая 2011

Проблема здесь в том, что загружаемая вами ссылка на API-карту Google использует document.write для добавления дополнительных тегов скрипта на страницу. Это делает невозможным то, что вы пытаетесь сделать, поскольку это переопределит содержимое страницы.

0 голосов
/ 06 мая 2011

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.

...