Пошаговое руководство, как добавить на сайт карту Яндекс, Google, 2GIS

Для чего нужна карта на сайте

Если ваш бизнес есть не только в онлайн-пространстве, но и офлайн — без карты не обойтись. С её помощью можно наглядно показать:

Маршрут от ближайшей остановки или станции метро:

Пример карты на сайте, с обозначенным маршрутом

• Где будет проходить то или иное мероприятие;
• Зоны доставки товаров:
• Продаваемые земельные участки:

Пример карты на сайте с отмеченными земельными участками на продажу

В чем разница между статической и интерактивной картой

Статическая карта - это просто картинка (скриншот). Интерактивная карта, в отличие от статичной, позволяет управлять масштабом, самостоятельно прокладывать маршрут, смотреть что находится рядом с необходимой точкой.

На сайт можно добавить карты от Яндекса, Google и 2ГИС.

Встраиваем Яндекс Карту с существующей меткой

Чтобы добавить на сайт карту с компанией, которая уже существует на Яндекс.Картах необходимо:

1. Перейти в Яндекс. Карты и вбить название компании:

2. Нажать на три точки в правом верхнем углу и выбрать пункт «Поделиться»:

3. В строке «Виджет с картой» скопировать код (можно посмотреть как карта будет выглядеть на сайте нажав «Предпросмотр»):

4. Добавить скопированный код на сайт в нужное место на сайте. Карта добавлена!

Создаем свою метку в конструкторе карт от Яндекс

Второй способ - воспользоваться конструктором карт. Для этого нужно:

1. Войти или зарегистрироваться в Яндексе (если у вас есть Яндекс Почта — этого достаточно);
2. Зайти в «Конструктор карт»;
3. Нажать «Создать карту»

5. Найти адрес самостоятельно или вбить в поиске. Задать название карты и описание.

6. Поставить метку, задать ей нужный цвет, прописать комментарии:

7. При необходимости можно проложить маршрут от станции метро, например:

8. Когда все необходимые метки и маршруты внесены, осталось нажать кнопку «Сохранить и продолжить»:

9. Проверяем, чтобы была выбрана интерактивная карта (статическая будет выгружена в формате PNG изображения). Выставляем нужный размер — ширину и высоту в px, меняем вручную или выставляем ширину 100% меняя только высоту.

 10. Если выбранный размер подходит, внешний вид устраивает, нажимаем «Получить код карты», копируем код и вставляем на сайт

Встраиваем Google карту с существующей меткой

Порядок действий не особо отличается от Яндекса:

1. Зайти в Google Maps и в поиске вбить необходимый адрес или название:
   
   
2. Нажать «Поделиться», выбрать раздел «Встраивание карт» и скопировать код:

Карта добавлена!

Создаем свою метку в конструкторе карт от Google

Сервис по созданию карт у Гугла называется «Мои карты» (или My Maps).

1. Находим его в поиске и нажимаем кнопку «Попробовать»:
   
   
2. Следующим шагом нужно «Создать новую карту». Там же можно посмотреть краткий обзор со всеми возможностями конструктора:
   
   
3. Далее можно прописать название и описание карты, выбрать режим отображения:
    
   
4. Чтобы добавить точку на карту, нужно вбить в поиске адрес или самостоятельно поставить маркер. Затем ввести название и описание точки. При необходимости можно добавить фото или видео:
    
   
5. Проложить маршрут можно как вручную, используя инструмент «Линия», так и выбрав пункт «Проложить маршрут» на точке. Возможны три варианта маршрута (пешком, на велосипеде и на автомобиле):
   
   
6. Маркеров, как и маршрутов, можно добавлять столько, сколько необходимо:
   
   
7. Когда все метки проставлены, маршруты проложены, и карта готова к интеграции на сайт, нужно нажать «Поделиться»:
   
   
8. В открывшемся окне разрешить доступ к карте и нажать «Закрыть»:
   
   
9. Возле названия карты нажать на три точки и выбрать пункт «Добавить на сайт»:

10. Скопировать код и, как и сказано в инструкции, можно его вставлять на сайт:

Если размер карты не подходит, его можно поменять прямо в коде изменив параметры width и height:

Как добавить на сайт карту 2GIS

В 2ГИС поиск осуществляется по организациям, а не по адресу. Поэтому если организация не добавлена на карту, надо это исправить. 2GIS позволяет интегрировать карты на сайт также несколькими способами.

Добавление виджета карт на сайт

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

1. Найти в поиске по запросу «Карты для блока контактов на сайте 2ГИС» соответствующую страницу (см. скрин) и перейти на неё:

2. Указать город, ввести название организации в поиске и выбрать нужное в появившемся списке:


3.  При необходимости можно изменить масштаб и размер карты:

4. После всех изменений и сохранения нужных размеров, нажать «Далее», ознакомиться и согласиться с Лицензионным соглашением и нажать кнопку «Получить код»:

5. Осталось скопировать код и добавить его к себе на сайт:

Интеграция карты по API

Есть ещё один способ добавления карты используя API. Он платный, а цена зависит от количества запросов, посещений, и рассчитывается сервисом индивидуально для каждого бизнеса. Ознакомиться более подробно можно зайдя на карту 2GIS, выбрав в меню пункт «API 2ГИС»:

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

Создание карты через конструктор со своими метками

В случае, если компания не добавлена в 2ГИС, или необходимо поставить какие-то свои метки и маршруты, можно воспользоваться конструктором карт.

Находим в поиске конструктор от 2GIS и попадаем на такую страницу:

Сервис позволяет менять размер карты, добавлять отметки по определённому адресу, проставлять их вручную, добавлять линии (например, чтобы показать маршрут) и различные фигуры — прямоугольник, круг и многоугольник — можно использовать для выделения какого‑то участка или области.

Чтобы поставить точку на карте нужно выбрать отметку в верхней панели, и поставить её в необходимое место. Добавить к ней подпись (она будет видна всегда) и описание (будет всплывать при клике на точку) в поля, которые появятся в нижнем левом углу экрана. Там же можно изменить цвет отметки:

Чтобы показать маршрут до точки, надо выбрать инструмент «Линия», проложить нужный путь, отредактировать цвет и толщину линии, если это необходимо, и можно добавить описание, которое также будет видно по клику на маршрут:

По этой же логике можно добавлять, настраивать и управлять фигурами:

После завершения работы можно получить код, нажав на одноимённую кнопку. Затем скопировать его и установить на сайт:

Что сделать, чтобы карта не тормозила скорость сайта

Карты довольно тяжелые, они прогружаются вместе со всей страницей и могут на пару секунд увеличивать скорость загрузки. Поисковые системы на это реагируют совсем не положительно. Чтобы задобрить поискового робота и сэкономить трафик пользователей, которые не всегда доскролливают до блока с контактами, можно немного пошаманить с кодом и сделать отложенную загрузку карт с помощью lazy-load.

Загрузка карты после доскролла

Если вы разместили карту в конце страницы или в поп-апе, для неё можно настроить отложенную загрузку. То есть, пока человек не доскроллит до карты, она не будет прогружаться, и, соответственно, не будет тратить трафик.

Рассмотрим на примере Google Maps:

Исходный код с вашей картой, который даёт Гугл:

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1WYGSTYhhY8y4MQ0YkY6DvzNGogCVJ78M&amp;ehbc=2E312F&quot; width="640" height="480"></iframe>

После iframe добавляем data-aload, а вместо src пишем data-original и получаем вот такой код:

<iframe data-aload data-original="https://www.google.com/maps/d/u/0/embed?mid=1WYGSTYhhY8y4MQ0YkY6DvzNGogCVJ78M&amp;ehbc=2E312F&quot; width="640" height="480"></iframe>

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

Загрузка карты по ховеру

Ещё один способ уменьшить влияние на скорость сайта — загрузка карты при наведении на неё. Логика этого способа такова, что изначально на сайте карта отображается в виде скрина, соответственно не тратит много времени на загрузку, а при наведении (или тач на телефоне) скрин заменяется на интерактивную карту.

Этот вариант отложенной загрузки рассмотрим на примере Яндекс.Карт.

После создания карты в конструкторе от Яндекса получаем код такого типа:

<script async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A76f8fb9bb50f05db67012f61108...;

Создаём div-блок для карты, присваиваем ему id и class и вносим некоторые изменения в скрипте. Получается такой код:

<div id="map_container" class="map container-fluid">

<script id="ymap_lazy" async="" data-src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A76f8fb9bb50f05db67012f61108df177cef4c517c57324b88b81ff086473d035&width=700&height=700&lang=ru_RU&scroll=true"></script>

</div>

Делаем скрин карты, загружаем на сервер. получаем ссылку задаём для неё стили:

<style>
    .map.container-fluid {
        height: 700px; //высота картинки
        padding: 0;
        background-image: url(img/map.png);
        background-position: center center;
    }
</style>

Height — высота загружаемой картинки и она должна соответствовать высоте карты.
В значение url строки background-image вставляется ссылка на скрин.

Дальше пишем код JavaScript, который отследит наведение на карту (тач с телефона):

<script>
    let map_container = document.getElementById('map_container');
    let options_map = {
        once: true,//запуск один раз, и удаление наблюдателя сразу
        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>

Задача выполнена!

Отображение карты на сайте

Когда мы вставляем карту на сайт она автоматически располагается в левом верхнем углу и в том размере. который мы настроили в конструкторе — в случае с Яндекс и 2ГИС, или в размере по умолчанию, который даёт Гугл — 640×480px. Но бывают моменты, когда карта должна быть на весь экран по ширине, или размещаться по центру, и многие сталкиваются с проблемами в реализации этих решений. Разберемся подробнее.

Как растянуть карту по ширине экрана

Растянуть карту на всю ширину экрана можно несколькими способами:

1. Прописать в коде, вместо указанной ширины в пикселях, 100%

<script async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A76f8fb9bb50f05db67012f61108df177cef4c517c57324b88b81ff086473d035&width=100%&height=700&lang=ru_RU&scroll=true"></script>

2. Убрать значение ширины совсем. В таком случае карта тоже растянется на всю ширину.

3. Загнать скрипт карты в div-блок, удалить значения ширины и высоты в коде самой карты и с помощью css стилей задать нужные параметры родительскому блоку. Например:

#map_container {
	width:100vw;
	height:700px;
}

Единицы измерения vw — для ширины и vh — для высоты, эквивалентны процентам и вычисляются относительно размера окна браузера. Поэтому если вы хотите, чтобы код корректно сработал, лучше указать их.

Изменять можно как ширину карты, так и высоту. Проделав всё то же самое, что описано выше, но для высоты.

Как разместить карту по центру экрана

Для того чтобы поставить карту по центру, достаточно разместить её в div‑блок и в css стилях задать ему параметр margin:0 auto; Карта чётко отцентрируется на экране.

То же самое касается и любого другого расположения карты. Достаточно загнать ее в div‑блок, и позиционировать уже его, применяя нужные стили.

Мы с радостью сделаем для Вас сайт, который будет очень удобным для покупателей!