serii81
@serii81
Я люблю phр...

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

Добрый день.
Хочу ускорить загрузку сайта по 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, но карта не работает.
Чего-то я не учел.

Заранее благодарен за подсказку.
  • Вопрос задан
  • 169 просмотров
Решения вопроса 3
@HikariNoSekai
Middle Vue.js Developer
Потому что карта инициализируется до того как Вы меняетя src. Сделайте так чтоб оно инициализировалась после всей загрузки DOM ну или сразу после задания src
Ответ написан
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
  1. Используйте Intersection Observer чтобы отследить когда пользователь доскролит до карты
  2. Когда доскролит — вызовете условную функцию loadMapScript, которая создаст тег скрипта, вставит его в документ и повесит обработчик события load
  3. А уже в обработчике события load вызывайте ваш initMap

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы