«
»
GoogleGoogle MapsWordPressWordPress - jQuery

Google Maps API + B-Lazy + King Composer – или отложенная загрузка карт

Google Maps API + B-Lazy + King Composer - или отложенная загрузка карт

Задача загрузить карты Google отложено, то есть после того момента когда пользователь доскролил до блока с картой.

Для этого нам понадобятся:

Знание Google Maps API и и Ваш личный key

Подключение библиотеки отложенной загрузки B-Lazy

Изображение которое будет отображаться место нашего блока с картой

Изображение маркера

Вариант 1 — без кастомизации карты (перед блоком с картами должен отработать скрипт b-lazy):

<span style="text-align:center"> <iframe style="align:center;" class="b-lazy" src="/google-maps-img.jpg" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.095177796534!2d34.806532215747914!3d50.903454979540435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x412901f44e3c2799%3A0xc7dafc2afc358342!2z0LLRg9C70LjRhtGPINCl0LDRgNC60ZbQstGB0YzQutCwLCA0LCDQodGD0LzQuCwg0KHRg9C80YHRjNC60LAg0L7QsdC70LDRgdGC0Yw!5e0!3m2!1sru!2sua!4v1492186204009" frameborder="0" width="100%" height="500px" allowfullscreen> </iframe> </span>

Вариант 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:

<div class="SDStudio_Preloader" style="left: 0; width: 100%; height: 554px; position: relative; padding-bottom: 554px;"> <!-- padding-bottom: 56.2493%;" --> <iframe class="b-lazy" data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.095177796534!2d34.806532215747914!3d50.903454979540435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x412901f44e3c2799%3A0xc7dafc2afc358342!2z0LLRg9C70LjRhtGPINCl0LDRgNC60ZbQstGB0YzQutCwLCA0LCDQodGD0LzQuCwg0KHRg9C80YHRjNC60LAg0L7QsdC70LDRgdGC0Yw!5e0!3m2!1sru!2sua!4v1492186204009" style="border: 0; top: 0; left: 0; width: 100%; height: 554px; position: absolute;" allowfullscreen scrolling="no"></iframe> <!-- --> </div>

Вариант 3 — с кастомным маркером (перед блоком с картами должен отработать скрипт b-lazy):

<!-- Stili dlia bloka s kartoi` --> <style> #map-canvas{ height: 500px; width: 100%; } </style> <!-- Blok dlia karty` --> <div id="map-canvas"></div> <!-- Google Maps SCRIPT API <script class="b-lazy" defer data-src="https://maps.googleapis.com/maps/api/js?key=ЗДЕСЬ ВАШ API КЛЮЧ GOOGLE MAPS"></script>--> <!-- Custom Sript for Google Maps <script class="b-lazy" defer data-src="https://maps.googleapis.com/maps/api/js?key=ЗДЕСЬ ВАШ API КЛЮЧ GOOGLE MAPS"></script>--> <script src="https://maps.googleapis.com/maps/api/js?key=ЗДЕСЬ ВАШ API КЛЮЧ GOOGLE MAPS"></script> <script> // if HTML DOM Element that contains the map is found... if (document.getElementById('map-canvas')){ /* Coordinates 48.177536, 11.537836 55.9951499,37.2067166, 55.9951499,37.2067166,20*/ var markerLatLng = new google.maps.LatLng(55.995307, 37.206615); var main_color = '#004191', //main color saturation_value= -1, //saturation brightness_value= 1; //brightness var mapOptions = { zoom: 16, center: markerLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); var markerIcon = { /*url: 'http://image.flaticon.com/icons/svg/252/252025.svg',*/ url:'Map-Marker.jpg', /*ШИРИНА И ВЫСОТА МАРКЕРА*/ scaledSize: new google.maps.Size(70, 90), /*Смещение маркера в нутри блока маркера*/ origin: new google.maps.Point(0, 0), /**/ /* anchor: new google.maps.Point(50,65), */ labelOrigin: new google.maps.Point(140,33), }; var markerLabel = ' '; var marker = new google.maps.Marker({ map: map, animation: google.maps.Animation.DROP, position: markerLatLng, icon: markerIcon, label: { text: markerLabel, color: "#eb3a44", fontSize: "16px", fontWeight: "bold" } }); }; </script>

Источник записи: https://mediadoma.com

Связанные записи
PageSpeed InsightsWordPressПанели управления

Как повысить производительность WordPress - советы от Plesk

LinuxWEBWordPressПанели управления

Как уменьшить нагрузку на сервер и повысить скорость WordPress с помощью Memcached | Форум Plesk

WordPress

WordPress 5.5 - 20 новых функций и много улучшений. Что нового в WP.

WordPressПлагины

Плагин Pinterest Automatic Pin Wordpress от ValvePress (авто постинг в Pinterest на автомате)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *