«
»
GoogleGoogle MapsjQueryWEBWordPressWordPress - jQuery

Google Maps – С отложенной загрузкой и прилоадером (полностью адаптивное)

Друзья в данной записи предоставлю пример кода в котором фрейм карты отображается с отложенной загрузкой, а до тех пор пока отобразится карта Google во весь блок отображается прелоадер сигнализирующий о загрузке блока с картой.

Друзья в данной записи предоставлю пример кода в котором фрейм карты отображается с отложенной загрузкой, а до тех пор пока отобразится карта Google место неё отображается прелоадер сигнализирующий о загрузке блока с картой.

Скрипт отвечающий за ленивую загрузку заимствован у iframely.com.

Блок с картой Google Maps (HTML код):

<div style="left: 0;width: 100%;height: 400px;position: relative;/* padding-bottom: 75.0019%; */margin-bottom: -15px;"> <div class="kc-elm kc-title-wrap " style=" z-index: 9; position: inherit; color: black; text-align: center; font-weight: 700; "> <h4 class="kc_title" style=" color: black; margin-top: 20px; font-weight: 700; ">МИИ</h4> </div> <iframe data-iframely-url="https://www.google.com/maps/embed/v1/place?key=AIzaSyC7zimSzASZomtEtWm25X-mpjxeqJ5tKLg&amp;q=%D1%83%D0%BB.+%D0%A5%D0%B0%D1%80%D1%8C%D0%BA%D0%BE%D0%B2%D1%81%D0%BA%D0%B0%D1%8F,+113,+%D0%A1%D1%83%D0%BC%D1%8B,+%D0%A1%D1%83%D0%BC%D1%81%D0%BA%D0%B0%D1%8F+%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D1%8C,+40000&amp;center=50.894832,34.8390814&amp;zoom=17" style="border: 0; top: 0; left: 0; width: 100%; height: 400px; position: absolute; background-image: url('/wp-content/uploads/2018/02/source.gif'); background-size: cover; background-position: center;"" allowfullscreen=""> </iframe> </div> <script async="" src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

Вставьте данный код в удобном для Вас месте, мой публичный API ключ я так подозреваю проживет не долго так что вот в этом мете:

key=AIzaSyC7zimSzASZomtEtWm25X-mpjxeqJ5tKLg

 Место моего ключа вставьте свой.

Эти данные замените на свои координаты места расположения:

50.894832,34.8390814

Изображение прелоадера:

Интересные изображения на место прелоадера карт находятся по ссылке ниже:

Ссылка

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

Связанные записи
WordPressПлагины

Полный обзор лучших плагинов для календаря бронирования в WordPress

ElementorWordPressВсе для разработки плагиновПлагины

Создание пользовательских виджетов Elementor - правильный путь! | Бен Маршалл

WordPressПлагины

Swift Performance - Рекомендуемые настройки производительности | Полное руководство 2020

WordPressВсе для разработки плагиновВсе для разработки шаблонов

Настройка PHP CodeSniffer в PhpStorm с помощью стандартов кодирования WordPress | Келлен Мейс