/ Адаптивность / Карта на сайт

Карта на сайт

HIT

Для добавления интерактивной карты в раздел контакты, нужно поместить в страницу или шаблон сгенерированный код Yandex карты, Google Map, или 2GIS.

На данной странице я собрал популярные решения по добавлению карт через iframe, чтобы сравнить их внешний вид.

Яндекс карты

Ссылка на редактор Yandex Карты

Как подключить Яндекс карту через Api, читать здесь.

Как сделать отложенную загрузку карты с Яндекс Api.

Отложенная загрузка карты Яндекс из Конструктора карт

<style>
    .map.container-fluid {
        height: 340px;
        padding: 0;
        background-image: url(/uploads/common/ymap0.png);
        background-position: center center;
    }
</style>

<div id="map_container" class="map container-fluid">
    <script id="ymap_lazy" data-skip-moving="true" async=""
            data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&amp;width=1280&amp;height=400&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

Скрипт подгрузки

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//once start, thereafter destroy listener
        passive: true,
        capture: true
    };
    map_container.addEventListener('click', start_lazy_map, options_map);
    map_container.addEventListener('mouseover', start_lazy_map, options_map);
    map_container.addEventListener('touchstart', start_lazy_map, options_map);
    map_container.addEventListener('touchmove', start_lazy_map, options_map);

    let map_loaded = false;
    function start_lazy_map() {
        if (!map_loaded) {
            let map_block = document.getElementById('ymap_lazy');
            map_loaded = true;
            map_block.setAttribute('src', map_block.getAttribute('data-src'));
            map_block.removeAttribute('data_src');
            console.log('YMAP LOADED');
        }
    }
</script>

Google карты

Ссылка на редактор Google Map

Читать том как подключить функционал Google Map Api.

Карты 2GIS

Посмотреть на карте Ростова-на-Дону

Ссылка на редактор 2GIS

Для адаптивности надо добавить стиль iframe {width: 100%;}
[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Записи-метки на картах

Записи-метки на картах

Сделаем функционал привязки записи (любого типа) к картам Google или Yandex. Это может быть востребовано для контактов дилерских центров, филиалов и т.п. Это статья является как бы вступительной теоретической. Более Читать далее »

API Яндекс.Карт

API Яндекс.Карт

Если нам нужно кастомизировать карту Яндекс, то будет не достаточно подключить ее через iframe, т.к. в нем не будет никаких настроек. Необходимо подключить API Яндекс.Карт Подключаем API Яндекс.Карт На данный Читать далее »

Множественные точки на Google Map

Множественные точки на Google Map

Добавим на карту Google множество точек с описаниями.

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

Пока нет комментариев. Будь первым!

Карта на сайт
Импорт, экспорт товаров WC
Рекомендации для васИмпорт, экспорт товаров WCOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.