Динамически загружать API Карт Google

Question

Я бы хотел динамически загружать карты google api - когда я определенный элемент существует на текущей странице.

Когда я пытаюсь использовать геокодер, я получаю следующее сообщение:

ReferenceError: google is not defined 

Так я думаю, что карты апи не может быть успешно загружена, но поджигатель все выглядит нормально (Скрипт вызывается правильно)

if ($('.vcard').length > 0) { 

    // load google maps when vcard is present 

    var s = document.createElement("script"); 
    s.type = "text/javascript"; 
    s.src = "https://maps.google.com/maps/api/js?sensor=false"; 
    $("head").append(s); 

    // error here - unable to use google maps 
    var geocoder = new google.maps.Geocoder(); 

Любые идеи? Спасибо.

Answer 1

Благодарим Вас за указывая мне в правильном направлении. Уже выяснено, что в Google есть пример для asyncrounous загрузки:

function loadScript() { 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' + 
     '&signed_in=true&callback=initialize'; 
    document.body.appendChild(script); 
} 

function addGoogleMap() { 

    if ($('.vcard').length > 0) { 
     loadScript(); 
    } 
} 

function initialize() { 

    // get the adress 
    var CurrentAddress = $('.adr').children().text(); 

    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': CurrentAddress }, function (results, status) { 

    if (status == google.maps.GeocoderStatus.OK) { 

     console.log('success'); 

    } 
} 

Answer 2

Я изменил свой код для запуска после нагрузки сценария:

if ($('.vcard').length > 0) { 

    // load google maps when vcard is present 

    var s = document.createElement("script"); 
    s.type = "text/javascript"; 
    s.src = "https://maps.google.com/maps/api/js?sensor=false"; 
    s.onload = function() { 
     var geocoder = new google.maps.Geocoder(); 
    }; 
    $("head").append(s);