Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Пошаговое руководство, как добавить на сайт карту Яндекс, Google, 2GIS
Написанного текстом адреса на странице контакты уже недостаточно. Время — дорогой ресурс, поэтому не стоит заставлять пользователя проделывать лишние действия. Скопировать адрес с сайта, открыть карту, вставить адрес — недолгие, но очень нудные и, по-факту, лишние шаги. Добавьте карту на сайт. Помимо удобства для потенциального заказчика, получите еще плюс к ранжированию сайта поисковыми системами.
Для чего нужна карта на сайте
Если ваш бизнес есть не только в онлайн-пространстве, но и офлайн — без карты не обойтись. С её помощью можно наглядно показать:
● Местоположение офисов компании, магазинов, клиник, салонов, пунктов выдачи:
Местоположение салонов оптики сети «ОПТИК ЛАБ». Проект WebValley Studio
Филиалы поставщика спутникового оборудования «Технофорум Телекоммуникации».
Проект WebValley Studio
● Маршрут от ближайшей остановки или станции метро:
Пример карты на сайте, с обозначенным маршрутом
● Где будет проходить то или иное мероприятие;
● Зоны доставки товаров:
● Зоны доставки товаров:
Пример отмеченных зон доставки. В зависимости от геолокации заказчика меняется стоимость доставки
● Продаваемые земельные участки:
Пример карты на сайте с отмеченными земельными участками на продажу
В чем разница между статической и интерактивной картой
Все прикреплённые выше скрины — наглядный пример статической карты. Это просто картинка (скриншот). Она неудобна, не детализирована, зачастую может быть отвратного качества при увеличении. При изменении информации на картах, картинку придётся перезаливать. А когда речь идёт, например, о продаже недвижимости, делать это придётся часто. То есть с точки зрения разработки сайтов, вставлять карту картинкой — плохой тон.
Интерактивная карта, в отличие от предыдущей, позволяет управлять масштабом, самостоятельно прокладывать маршрут, смотреть что находится рядом с необходимой точкой.
На сайт можно добавить карты от Яндекса, Google и 2ГИС.
Интерактивная карта, в отличие от предыдущей, позволяет управлять масштабом, самостоятельно прокладывать маршрут, смотреть что находится рядом с необходимой точкой.
На сайт можно добавить карты от Яндекса, Google и 2ГИС.
Как добавить Яндекс Карту на сайт
Есть несколько возможных вариантов добавления карт:
Встраиваем Яндекс Карту с существующей меткой
Чтобы добавить на сайт карту с компанией, которая уже существует на Яндекс.Картах необходимо:
● Перейти в Яндекс. Карты и вбить название компании:
● Нажать на три точки в правом верхнем углу и выбрать пункт «Поделиться»:
● В строке «Виджет с картой» скопировать код (можно посмотреть как карта будет выглядеть на сайте нажав «Предпросмотр»):
● Добавить скопированный код на сайт в нужное место на сайте.
Карта добавится размером 560×400px и будет выглядеть так:
Карта добавится размером 560×400px и будет выглядеть так:
Если всё ещё трудно разобраться, смотрите пошаговую видеоинструкцию на примере добавления карты на Тильду:
Этот способ предпочтителен, поскольку подразумевает, что у вас есть аккаунт в Яндекс. Бизнес и компания добавлена на Яндекс.Карты. Помимо того, что это даёт возможность легко и быстро вставить карту на сайт, вы получаете расширенный сниппет в результатах поиска по названию компании: справа откроется карточка с информацией об организации, в том числе с картой, чтобы пользователь мог быстро добраться до вас:
Карточка компании с картой в поисковой выдаче Яндекс
Создаем свою метку в конструкторе карт от Яндекс
Второй способ - воспользоваться конструктором карт. Для этого нужно:
● Войти или зарегистрироваться в Яндексе (если у вас есть Яндекс Почта — этого достаточно);
● Зайти в «Конструктор карт»;
● Нажать «Создать карту»
● Зайти в «Конструктор карт»;
● Нажать «Создать карту»
● Найти адрес самостоятельно или вбить в поиске. Задать название карты и описание:
● Поставить метку, задать ей нужный цвет, прописать комментарии:
● При необходимости можно проложить маршрут от станции метро, например:
● Когда все необходимые метки и маршруты внесены, осталось нажать кнопку «Сохранить и продолжить»:
● Проверяем, чтобы была выбрана интерактивная карта (статическая будет выгружена в формате PNG изображения). Выставляем нужный размер — ширину и высоту в px, меняем вручную или выставляем ширину 100% меняя только высоту.
● Если выбранный размер подходит, внешний вид устраивает, нажимаем «Получить код карты», копируем код и вставляем на сайт
На сайте карта будет выглядеть так:
Симпатично, правда?
Как добавить Google Maps на сайт
В Гугле, как и в Яндексе, два варианта вставки карты. С метками, которые уже есть в картах, и с добавлением своих.
Встраиваем Google карту с существующей меткой
Порядок действий не особо отличается от Яндекса:
● Зайти в Google Maps и в поиске вбить необходимый адрес или название:
● Нажать «Поделиться», выбрать раздел «Встраивание карт» и скопировать код:
● Вставленная на сайт карта будет размером 600×450px и внешне будет выглядеть так:
Создаем свою метку в конструкторе карт от Google
Сервис по созданию карт у Гугла называется «Мои карты» (или My Maps).
● Находим его в поиске и нажимаем кнопку «Попробовать»:
● Следующим шагом нужно «Создать новую карту». Там же можно посмотреть краткий обзор со всеми возможностями конструктора:
● Далее можно прописать название и описание карты, выбрать режим отображения:
● Чтобы добавить точку на карту, нужно вбить в поиске адрес или самостоятельно поставить маркер. Затем ввести название и описание точки. При необходимости можно добавить фото или видео:
● После сохранения точки в любой момент к ней можно вернуться, чтобы отредактировать внешний вид — цвет маркера, изменить иконку, добавить фото/видео, проложить маршрут или удалить её:
● Проложить маршрут можно как вручную, используя инструмент «Линия», так и выбрав пункт «Проложить маршрут» на точке. Возможны три варианта маршрута (пешком, на велосипеде и на автомобиле):
● Маркеров, как и маршрутов, можно добавлять столько, сколько необходимо:
● Когда все метки проставлены, маршруты проложены, и карта готова к интеграции на сайт, нужно нажать «Поделиться»:
● В открывшемся окне разрешить доступ к карте и нажать «Закрыть»:
● Возле названия карты нажать на три точки и выбрать пункт «Добавить на сайт»:
● Скопировать код и, как и сказано в инструкции, можно его вставлять на сайт:
● В итоге получится вот так:
Если размер карты не подходит, его можно поменять прямо в коде изменив параметры width и height:
Как добавить на сайт карту 2GIS
В 2ГИС поиск осуществляется по организациям, а не по адресу. Поэтому если организация не добавлена на карту, надо это исправить. 2GIS позволяет интегрировать карты на сайт также несколькими способами.
Добавление виджета карт на сайт
Если у вас предполагается небольшой поток посетителей на сайт, можно воспользоваться бесплатным виджетом карт. Для этого нужно проделать следующие действия:
● Найти в поиске по запросу «Карты для блока контактов на сайте 2ГИС» соответствующую страницу (см. скрин) и перейти на неё:
● Указать город, ввести название организации в поиске и выбрать нужное в появившемся списке:
● При необходимости можно изменить масштаб и размер карты:
● После всех изменений и сохранения нужных размеров, нажать «Далее», ознакомиться и согласиться с Лицензионным соглашением и нажать кнопку «Получить код»:
● Осталось скопировать код и добавить его к себе на сайт:
На сайте виджет будет выглядеть так:
Интеграция карты по API
Есть ещё один способ добавления карты используя API. Он платный, а цена зависит от количества запросов, посещений, и рассчитывается сервисом индивидуально для каждого бизнеса. Ознакомиться более подробно можно зайдя на карту 2GIS, выбрав в меню пункт «API 2ГИС»:
Вас перекинет на лендинг посвященный различным продуктам компании, где можно ознакомиться с условиями и оставить заявку на получения API ключа.
Создание карты через конструктор со своими метками
В случае, если компания не добавлена в 2ГИС, или необходимо поставить какие-то свои метки и маршруты, можно воспользоваться конструктором карт.
Находим в поиске конструктор от 2GIS и попадаем на такую страницу:
Находим в поиске конструктор от 2GIS и попадаем на такую страницу:
Сервис позволяет менять размер карты, добавлять отметки по определённому адресу, проставлять их вручную, добавлять линии (например, чтобы показать маршрут) и различные фигуры — прямоугольник, круг и многоугольник — можно использовать для выделения какого‑то участка или области.
Чтобы поставить точку на карте нужно выбрать отметку в верхней панели, и поставить её в необходимое место. Добавить к ней подпись (она будет видна всегда) и описание (будет всплывать при клике на точку) в поля, которые появятся в нижнем левом углу экрана. Там же можно изменить цвет отметки:
Чтобы поставить точку на карте нужно выбрать отметку в верхней панели, и поставить её в необходимое место. Добавить к ней подпись (она будет видна всегда) и описание (будет всплывать при клике на точку) в поля, которые появятся в нижнем левом углу экрана. Там же можно изменить цвет отметки:
Чтобы показать маршрут до точки, надо выбрать инструмент «Линия», проложить нужный путь, отредактировать цвет и толщину линии, если это необходимо, и можно добавить описание, которое также будет видно по клику на маршрут:
По этой же логике можно добавлять, настраивать и управлять фигурами:
После завершения работы можно получить код, нажав на одноимённую кнопку. Затем скопировать его и установить на сайт:
С настройками, которые были выбраны в примере, карта на сайте выглядит так:
Что сделать, чтобы карта не тормозила скорость сайта
Карты довольно тяжелые, они прогружаются вместе со всей страницей и могут на пару секунд увеличивать скорость загрузки. Поисковые системы на это реагируют совсем не положительно. Чтобы задобрить поискового робота и сэкономить трафик пользователей, которые не всегда доскролливают до блока с контактами, можно немного пошаманить с кодом и сделать отложенную загрузку карт с помощью lazy-load.
Загрузка карты после доскролла
Если вы разместили карту в конце страницы или в поп-апе, для неё можно настроить отложенную загрузку. То есть, пока человек не доскроллит до карты, она не будет прогружаться, и, соответственно, не будет тратить трафик.
Рассмотрим на примере Google Maps:
Исходный код с вашей картой, который даёт Гугл:
Рассмотрим на примере Google Maps:
Исходный код с вашей картой, который даёт Гугл:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1WYGSTYhhY8y4MQ0YkY6DvzNGogCVJ78M&ehbc=2E312F" 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&ehbc=2E312F" width="640" height="480"></iframe>
Весь смысл в том, что браузер будет считывать ссылку только в тот момент, когда пользователь доскроллит до карты.
Загрузка карты по ховеру
Ещё один способ уменьшить влияние на скорость сайта — загрузка карты при наведении на неё. Логика этого способа такова, что изначально на сайте карта отображается в виде скрина, соответственно не тратит много времени на загрузку, а при наведении (или тач на телефоне) скрин заменяется на интерактивную карту.
Этот вариант отложенной загрузки рассмотрим на примере Яндекс.Карт.
После создания карты в конструкторе от Яндекса получаем код такого типа:
Этот вариант отложенной загрузки рассмотрим на примере Яндекс.Карт.
После создания карты в конструкторе от Яндекса получаем код такого типа:
<script type="text/javascript" charset="utf-8" async 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-блок для карты, присваиваем ему 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, который отследит наведение на карту (тач с телефона):
В значение 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. Но бывают моменты, когда карта должна быть на весь экран по ширине, или размещаться по центру, и многие сталкиваются с проблемами в реализации этих решений. Разберемся подробнее.
Как растянуть карту по ширине экрана
Растянуть карту на всю ширину экрана можно несколькими способами:
- Прописать в коде, вместо указанной ширины в пикселях, 100%
<script type="text/javascript" charset="utf-8" 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 стилей задать нужные параметры родительскому блоку. Например:
3. Загнать скрипт карты в div-блок, удалить значения ширины и высоты в коде самой карты и с помощью css стилей задать нужные параметры родительскому блоку. Например:
#map_container {
width:100vw;
height:700px;
}
Единицы измерения vw — для ширины и vh — для высоты, эквивалентны процентам и вычисляются относительно размера окна браузера. Поэтому если вы хотите, чтобы код корректно сработал, лучше указать их.
Изменять можно как ширину карты, так и высоту. Проделав всё то же самое, что описано выше, но для высоты.
Изменять можно как ширину карты, так и высоту. Проделав всё то же самое, что описано выше, но для высоты.
Как разместить карту по центру экрана
Для того чтобы поставить карту по центру, достаточно разместить её в div‑блок и в css стилях задать ему параметр margin:0 auto; Карта чётко отцентрируется на экране.
То же самое касается и любого другого расположения карты. Достаточно загнать ее в div‑блок, и позиционировать уже его, применяя нужные стили.
То же самое касается и любого другого расположения карты. Достаточно загнать ее в div‑блок, и позиционировать уже его, применяя нужные стили.
Прокачайте свои навыки в веб-дизайне и разработке сайтов
Надеемся, что статья была для вас полезной, и теперь клиенты всегда смогут вас найти, не уходя с сайта. Хотите узнать больше фишек по дизайну и разработке сайтов? Подпишитесь на наш блог! Хотите научиться создавать удобные конверсионные сайты, с уникальным дизайном, продуманным функционалом, оптимизацией под требования поисковых систем и кастомными кодовыми решениями на профессиональном уровне, как это делается у нас в агентстве? Запишитесь на ProWeb!
Автор статьи
Анастасия Панченко
Frontend Developer
23.04.2022
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.