Интерактивная карта на сайте: как сделать и для чего это нужно

Посетителям раздела «Контакты» интересно увидеть не только адрес компании, но и её расположение на карте, так как не все хорошо ориентируются по названиям улиц, а какие-то пользователи могут быть иногородними. В общем, ситуации бывают разные, и карта расположения компании — это крайне полезная функция. По карте можно проложить маршрут до места назначения, рассчитать расстояние, посмотреть схему проезда, посмотреть наличие парковки, поэтому карта на сайте нужна, и лучше всего, если она интерактивная.

Интерактивная карта — это карта, в которой можно изменять масштаб, двигаться в разных направлениях, узнавать о близлежащих ориентирах. Обычная карта в виде статичной картинки не даёт такого широкого функционала.

Интерактивная карта на сайте пример

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

Удобство пользователей — это только один аспект необходимости карты на сайте. Второй—это позитивное влияние на ранжирование сайта, так как наличие карты является коммерческим фактором. Сайты с хорошо проработанной страницей контактов с максимально полной информацией, включая схему проезда, маршрутов общественного транспорта, позитивно воспринимаются поисковиками и при прочих других факторах занимают более высокие позиции в выдаче.

Как сделать интерактивную карту для сайта

Сегодня разместить интерактивную карту на сайте не составляет никакого труда, это может сделать даже непрофессионал. Сделать карту можно с помощью специализированных сервисов. Самые популярные из них: Яндекс. Карты, Google Maps и 2ГИС.

Как добавить интерактивную карту Яндекс на сайт

Шаг 1. В сервисе Яндекс.Карты в правом верхнем углу нужно выбрать раздел «Мои карты». Сразу откроется «Конструктор карт». Там в строке поиска нужно ввести нужный адрес и добавить его на карту.

Шаг 2. Потом нужно выставить нужный масштаб карты, чтобы на ней были видны номера домов и названия улиц. Нажать «Сохранить и продолжить».

Шаг 3. Дальше оформить карту по своему вкусу. Можно добавить специальный символ для метки, написать её название, с помощью линий выстроить схему проезда, обозначить близлежащий ориентиры. Также в редакторе можно выбрать, в каком виде будет отображаться карта: в виде схемы, изображения со спутника или гибридный вариант.

Шаг 4. Когда карта готова нужно выбрать пункт «Интерактивная» и задать нужные размеры в пикселях. Можно поставить галочку напротив опции «Растянуть по ширине», чтобы карта автоматически подстраивалась под ширину страницы. В конце нужно кликнуть по кнопке «Получить код карты». Полученный код нужно вставить в HTML код на странице «Контакты».

Как сделать карту в Google Maps

Шаг 1. В сервисе Google Maps нужно ввести в поисковой строке адрес компании. После того, как он найдет на карте адрес, нужно нажать кнопку «Поделиться».

Шаг 2. В появившемся окне нужно выбрать вкладку «Встраивание карт». Там уже можно изменить масштаб, выбрать размер карты. Полученную ссылку нужно скопировать и так же вставить в код страницы.

Как вставить интерактивную карту на сайт с помощью 2Гис

Шаг 1. На официальном сайте 2GIS нужно зайти в раздел API и нажать кнопку «Создать виджет». Далее выбрать город и ввести название организации (она уже должна быть зарегистрирована в каталоге 2ГИС) и нажать кнопку «Далее».

Шаг 2. На этом этапе нужно согласиться с лицензионным соглашением и перейти к следующему шагу нажав кнопку «Получить код».

Шаг 3. Появившийся код нужно скопировать и вставить в HTML код страницы сайта компании.

При конструировании карты нужно учесть один момент: чтобы масштаб карты не изменялся при скроллинге страницы. На некоторых сайтах когда прокрутка страницы вниз доход до карты, она останавливается, и вместо этого с каждым поворотом колесика мышки увеличивается масштаб карты. Этого ни в коем случае нельзя допускать, так как это крайне негативно влияет на пользовательский опыт с сайтом, это очень неудобно и раздражает пользователей— процент отказов с такой страницы будет очень большим. Чтобы такого не произошло, нужно отключать прокрутку в коде карты.