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

Карта на сайт

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%;}

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Изменить стиль карты Google Map

Изменить стиль карты Google Map

Изменяем стили оформления карты Google Map. Также можно настроить отображение маркера, скрыть либо добавить объекты на карту. Подключение скрипта Google Maps API Подключаем скрипт добавляющий функционал добавления и редактирования карт Читать далее »

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

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

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

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

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

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

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

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

Карта на сайт
Калькуляторы транспортных компаний для предварительного расчета
Рекомендации для васКалькуляторы транспортных компаний для предварительного расчетаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.