Задача загрузить карты Google отложено, то есть после того момента когда пользователь доскролил до блока с картой.
Для этого нам понадобятся:
Знание Google Maps API и и Ваш личный key
Подключение библиотеки отложенной загрузки B-Lazy
Изображение которое будет отображаться место нашего блока с картой
Вариант 1 — без кастомизации карты (перед блоком с картами должен отработать скрипт b-lazy):
Вариант 2 — Если хотим что бы отображался прилоадер пока карта не отобразилась прописываем стили (внимательно читаем код стилей, там полезный комментарий):
.SDStudio_Preloader {
/* Качаем прилоадеры здесь:
https://mediadoma.com/_PRIMERU/Preloader/001_preloader-ZAGRUZKA.gif
https://mediadoma.com/_PRIMERU/Preloader/002_preloader-KRUG.gif
Далее загружаем прилоадер в корень сайта*/
background: transparent url(/loading.gif) center center/cover no-repeat scroll;
background-size: 150px !important;
}
И добавляем div'у класс .SDStudio_Preloader:
Вариант 3 — с кастомным маркером (перед блоком с картами должен отработать скрипт b-lazy):
Источник записи: https://mediadoma.com