Как сделать «lazy load» для google maps?

Question

[Web Lizard]

Имеется карта Гугла, которая вставлена на сайт таким образом:

<div id="big-map"></div>
		<script>
			function initMap() {
				var map = new google.maps.Map(document.getElementById('big-map'), {
					zoom: 17.5,
					center: {lat: 55.709600, lng: 37.620251}
				});

				var image_1 = '/project/images/other/domnouta.png';
				var point_1 = new google.maps.Marker({
					position: {lat: 55.55100, lng: 37.6220},
					map: map,
					icon: image_1,
					title: 'Точка'
				});			
			}
		</script>
		<script async defer
		src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK6grJrsAOZ4ON7qBgYKWCu0pdPAtpQeo&callback=initMap">
		</script>

Можно ли как то сделать так, чтобы карта открывалась по принципу Lazy Load - то есть чтобы она инициализировалась только тогда, когда пользователь скроллит до того места, где расположена карта?
Спасибо.

Comments

[Александр]

можно, но сначала нужно дождаться загрузки скрипта

Answer 1

[Алексей Уколов]

Да ровно так же, как с картинками — поменять src элемента, когда он попадёт в область видимости.

Comments

[Антон Михайлов]

Здравствуйте, Алексей!

Наткнулся на тему про lazy Load и увидел Ваш ответ на примере src элемента.
Да ровно так же, как с картинками — поменять src элемента, когда он попадёт в область видимости.
Можно подробнее, где почитать про область видимости и как это работает в связке с изменением src картинки?

Спасибо.

[Антон Михайлов]

Антон Михайлов,
Вы имеете ввиду добавить в тег атрибут loading?
<img src="image.jpg" loading="lazy" alt="..." />

Так?

PS при использовании карт на странице, он очень хорошо ускоряет сайт. Особенно если Яндекс карты. Без loading lazy у Яндекс скорость на PageSpeedInsite в районе 20% на мобилке. С ним около 85%