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

Карта на сайт

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

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

  • Похожие записи
  • Комментарии
  • Вложения
API Яндекс.Карт

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

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

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

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

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

Посты — метки на карте

Посты — метки на карте

Пытаясь реализовать удобный функционал по созданию меток на интерактивной карте я пришел к следующей системе. Заводим произвольный тип записи и таксономии чтобы структурировать и удобно манипулировать городами и точками. Основа Читать далее »

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

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

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