Google Maps Api v3 marker. google undefined

Question

У меня есть сайт с картами google api, который загружается асинхронно. Но это порождает заблуждение: google не найден. Мой код:

<script> 

function initialize() { 

    var mapOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(51.817116, 4.780616), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    panControl: false, 
    mapTypeControl: false, 
    scaleControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    rotateControl: false 
    }; 

    var map = new google.maps.Map(document.getElementById('maps'), 
    mapOptions); 
}; 

var customMarker = new google.maps.Marker({ 
    position: new google.maps.LatLng(51.817116, 4.780616), 
    map: map 
}); 

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

addLoadEvent(loadScript); 

</script> 

Когда я удалить маркер код работает правильно. Почему это не работает, если я добавляю маркер, как указано в некоторых примерах?

AddLoad - это событие загрузки. Это не проблема ... Может ли кто-нибудь помочь мне заставить это работать?

Answer 1

Вы не можете использовать API v3 Google Maps Javascript, пока он не будет загружен. Создание маркера выполняется до загрузки API. Вам нужно переместить его в функцию инициализации, которая не будет выполняться до тех пор, пока API не будет доступен.

<script> 

function initialize() { 

    var mapOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(51.817116, 4.780616), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    panControl: false, 
    mapTypeControl: false, 
    scaleControl: false, 
    streetViewControl: false, 
    overviewMapControl: false, 
    rotateControl: false 
    }; 

    var map = new google.maps.Map(document.getElementById('maps'), 
    mapOptions); 

    var customMarker = new google.maps.Marker({ 
    position: new google.maps.LatLng(51.817116, 4.780616), 
    map: map 
    }); 

}; // end of initialize 


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

addLoadEvent(loadScript); 

</script> 

Answer 2

Вы определяете свою переменную локально локально в пределах initialize, что означает, что к ней не могут обращаться ни одна из других функций. Объявить глобально за пределами initialize:

var map; 

function initialize() { 
    // code 
    map = new google.maps.Map(document.getElementById('maps', mapOptions); 
}