Почему google map временами выдает ошибку?

Question

[Максим Шадрин]

Всем привет. Подключил на сайт гугл карты.
Подключаю в конце страницы, самым первым скриптом.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwOV3ft4xXnuj9f7aCPTcdKF_bTn6g25A&amp;callback=initMap" async=""></script>

А потом уже файл со своими скриптами.
Внутри данного файла подключение выглядит так:

$(function() {
   $(document).ready(function(){

	window.initMap = function() {

		var myLatLng = {lat: 45.1201, lng: 39.0096};

		var map = new google.maps.Map(document.getElementById('map'), {
			center: myLatLng,
			scrollwheel: false,
			zoom: 18
		});

		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			title: 'Hello World!'
		});

	}

});
});

Но время от времени я ловлю такую ошибку: Uncaught InvalidValueError: initMap is not a function
Я догадываюсь, что это происходит по причине того, что код выполняется раньше подключения файла гугл карт, но почему так происходит? Я подключаю этот файл первым (пробовал и асинхронный вариант и простой), внутри своего кода пишу $(document).ready(), что вроде как обязывает дождаться загрузки. Но карта все равно работает через раз.
Вот сам сайт.
карта в самом низу

Answer 1

[hoarywolf]

Сделайте вместо

window.initMap = function() {

просто

function initMap() {

, а главное вынесите ее за пределы

$(function() {

и до подключения файла от гугл.

Происходит так потому, что у вас initMap инициализируется только при полностью загруженном документе, а подключение файла происходит до.

Comments

[Максим Шадрин]

у меня весь код внутри безымянной функции, все библиотеки работаю нормально, почему вызов карт нельзя внутрь ее помещать?

[Максим Шадрин]

Сделал так:

//google map


$(document).ready(function(){

	// window.initMap = function() {
	function initMap() {

		var myLatLng = {lat: 45.1201, lng: 39.0096};

		var map = new google.maps.Map(document.getElementById('map'), {
			center: myLatLng,
			scrollwheel: false,
			zoom: 18
		});

		var marker = new google.maps.Marker({
			position: myLatLng,
			map: map,
			title: 'Hello World!'
		});

	}

});

$(function() {
//остальной код
});

Подключение гугловой карты отправил ниже общего кода, не помогло

[hoarywolf]

Вы поменяли шило на мыло. "Безымянная функция" и $(document).ready(function(){ это одно и тоже.

Понимаете, у вас функция initMap объявляется только когда document ready, то есть загружены все скрипты, картинки и тд. Вынесите initMap за пределы document ready и все будет работать.

[hoarywolf]

у вас получается идет загрузка страницы —> загружается файл скрипта с гугла, который хочет вызвать функцию initMap, но ее еще нет —> загружается все остальное на странице —> документ полностью загружен, вызывается document.ready —> объявляется функция initMap, но она уже никому не нужна

а должно быть так загрузка страницы —> объявляется функция initMap —> загружается файл скрипта с гугла, вызывает функцию initMap —> документ полностью загружен, вызывается document.ready —> обрабатываются все остальные ваши скрипты

[Максим Шадрин]

спасибо за понятное разъяснение, я воспринимал как раз таки это за вызов, даже не задумываясь, что это определение, а вызов происходит внутри гугловского скрипта. Теперь все ясно!

[hoarywolf]

Все верно. Обратите только внимание, что определение div-а для карты должно быть обязательно до подгрузки файла скрипта с гугла.

[Iskander]

hoarywolf: вот это действительно помогло!