Как загрузить гугл карту после полной загрузки страницы?

Question

[Сергей Бурдужа]

Добрый день.
Хочу ускорить загрузку сайта по pagespeed.
С картой сайт загружается 70%, без - 97.

И так, есть див
<div class="map" id="js-map"></div>

Перед body прописал скрипты

<script>
	// Initialize and add the map
	function initMap() {
		// The location of Uluru
		var mapCenter = {lat: 45.9590269, lng: 12.3180639};
		// The map, centered at Uluru
		var map = new google.maps.Map(
			document.getElementById('js-map'), {zoom: 15, center: mapCenter});
		// The marker, positioned at Uluru
		var marker = new google.maps.Marker({position: mapCenter, map: map});
	}
</script>
<!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
-->
<script id="js-map-load" async defer
        src="">
</script>

И в main.js прописал скрипт для jquery.

let mapOffsetTop = $('#js-map').offset().top;
	let scriptGoogleMapApi = $('#js-map-load');

	$(window).on('scroll', function () {
		if($(this).scrollTop() > mapOffsetTop) {
			if(scriptGoogleMapApi.attr('src') === ''){
				scriptGoogleMapApi.attr('src', 'https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap')
			}
		}
	});

Только при скроле в тег src прописывается путь к google map, но карта не работает.
Чего-то я не учел.

Заранее благодарен за подсказку.

Comments

[Антон]

Инициализируйте загрузку сразу по достижении координат сверху блока с картой.

[Сергей Бурдужа]

Антон, А как инициализировать загрузку, ведь сама загрузка прописана в функции initMap, которая прописана в src.
Или это не так?

[Антон]

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

Answer 1

[Игорь Стасюк]

Потому что карта инициализируется до того как Вы меняетя src. Сделайте так чтоб оно инициализировалась после всей загрузки DOM ну или сразу после задания src

Comments

[Сергей Бурдужа]

А я чего-то недопонимаю. Ведь инициализация карты, initMap прописан в src.

https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap

[Сергей Бурдужа]

Я инициализировал после загрузки страницы, но это не помогло.

window.onload=function(){
	let mapInitElem=document.createElement('script');
	mapInitElem.setAttribute("type","text/javascript");
	mapInitElem.innerHTML = "" +
		"function initMap() {"+
			// The location of Uluru
			"var mapCenter = {lat: 45.9590269, lng: 12.3180639};" +
			// The map, centered at Uluru
			"var map = new google.maps.Map(" +
				"document.getElementById('js-map'), {zoom: 15, center: mapCenter});" +
			// The marker, positioned at Uluru
			"var marker = new google.maps.Marker({position: mapCenter, map: map});" +
		"}";

	document.getElementsByTagName("body")[0].appendChild(mapInitElem);

	let fileref=document.createElement('script');
	fileref.setAttribute("type","text/javascript");
	fileref.setAttribute("src", 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBxE4eV2_MWXXb7iPnhOD8nRoIcVWxnNRU&callback=initMap');
	document.getElementsByTagName("body")[0].appendChild(fileref);
};

[Сергей Бурдужа]

Спасибо за идею.
Я еще добавил setTimeout и получилось. Теперь мой сайт как ракета.

window.onload=function(){
	let mapInitElem=document.createElement('script');
	mapInitElem.setAttribute("type","text/javascript");
	mapInitElem.innerHTML = "" +
		"function initMap() {"+
			// The location of Uluru
			"var mapCenter = {lat: 45.9590269, lng: 12.3180639};" +
			// The map, centered at Uluru
			"var map = new google.maps.Map(" +
				"document.getElementById('js-map'), {zoom: 15, center: mapCenter});" +
			// The marker, positioned at Uluru
			"var marker = new google.maps.Marker({position: mapCenter, map: map});" +
		"}";


	let fileref=document.createElement('script');
	fileref.setAttribute("type","text/javascript");
	fileref.setAttribute("src", 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBxE4eV2_MWXXb7iPnhOD8nRoIcVWxnNRU&callback=initMap');

	setTimeout(function () {
		document.getElementsByTagName("body")[0].appendChild(mapInitElem);
		document.getElementsByTagName("body")[0].appendChild(fileref);
	}, 2000);
};

i.imgur.com/FJ3CDDC.png
i.imgur.com/vsCrv01.png

Answer 2

[Alex]

1. Используйте Intersection Observer чтобы отследить когда пользователь доскролит до карты
   
2. Когда доскролит — вызовете условную функцию loadMapScript, которая создаст тег скрипта, вставит его в документ и повесит обработчик события load
   
3. А уже в обработчике события load вызывайте ваш initMap
   
   

Comments

[Сергей Бурдужа]

Я попытался через jquery сделать, но не сработало.

$(document).load(function () {
	$('body').append('<script>'+
		function initMap() {
			// The location of Uluru
			var mapCenter = {lat: 45.9590269, lng: 12.3180639};
			// The map, centered at Uluru
			var map = new google.maps.Map(
				document.getElementById("js-map"), {zoom: 15, center: mapCenter});
			// The marker, positioned at Uluru
			var marker = new google.maps.Marker({position: mapCenter, map: map});
		}
		+'</script>');
	$('body').append('<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxE4eV2_MWXXb7iPnhOD8nRoIcVWxnNRU&callback=initMap"></script>');
});

Я пишу в том же файле, что и остальной код, только в конце файла.

[Alex]

Сергей Бурдужа, Я говорю о другом — https://learn.javascript.ru/onload-onerror

const script = document.createElement('script')

script.src = 'https://maps.googleapis.com/...';

script.onload = function () {
   // Какой-то код, который будет запущен только после того, как сам скрипт загрузится
}

document.body.appendChild(script)

Answer 3

[profesor08]

Если в твоем коде нет ошибок, то у тебя как минимум не указан API ключ. Карта не будет загружена. Обо всех ошибках тебе все будет написано в консоли.

Comments

[Сергей Бурдужа]

Ключ я специально скрыл от вас))