Все посты
1178 9 Знания

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

Как сделать интерактивную карту с меткой офиса или магазина и вставить ее на сайт.

Если у вашей компании есть адрес, куда приходят клиенты, вы можете лишний раз позаботиться о них. Избавьте пользователей от необходимости копировать адрес, открывать карты и искать, где вы находитесь.

На сайт можно вставить карту Google или Яндекс с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, увеличивая время визита, что может быть важно для поведенческих факторов и SEO. 😉

Встроенная на сайт карта города с отметкой магазина
Яндекс.Карта с информацией о магазине на сайте g-velo.ru

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


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

Первый вариант: встроить Карту с меткой

Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:


Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:

Метка компании на карте
Организация на карте Яндекса

Пошагово:

  1. Найдите нужный адрес.

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

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


Второй вариант: создать свою метку

Создайте карту в Конструкторе:

Карта, которую мы сделали, выглядит так: у нее есть маркер с иконкой, которую мы выбрали, и отображается линия с пояснением для удобства.

Яндекс.Карта с меткой кафе для вставки на сайт
Карта, созданная в конструкторе Яндекса

Создание карты пошагово:

  1. Найдите адрес, выберите цвет и вид маркера.

  2. Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.

  3. При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.

  4. Сохраните карту. В следующем окне выберите ее вид: интерактивная или статическая.
    1. Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.

    2. Статическая будет выглядеть как картинка, ее можно распечатывать.

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

  6. Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.

  7. Скопируйте код для вставки на сайт: можно выбрать JavaScript или iframe.
    1. У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.

    2. Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск.

  8. Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.

  9. Вставьте код с картой Яндекса на сайт через редактор страницы.



Как вставить Google карту на сайт

Первый вариант: вставить карту из Google Maps

Откройте Google Maps, найдите компанию и скопируйте код для вставки:


Карта будет выглядеть так:

Google карта для вставки на сайт
Карта с меткой организации из Google Maps


Пошагово:

  1. Найдите компанию на картах, нажмите на «Поделиться».

  2. Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.

  3. Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.


Второй вариант: создать свою метку в Google Maps

Создайте метку в Google Картах:


Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.

Google карта с информацией о компании для вставки на сайт
Карта с меткой компании

Пошаговое создание метки на Google картах:

  1. Введите адрес или название компании.

  2. Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.

  3. Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».

  4. Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.



Напишите в комментариях, какая карта кажется вам удобнее и почему, чего не хватает другому сервису?

Теги поста или какие разделы почитать еще:

Комментарии (9)
Melda Research   04.01.2021 12:16
Nursing paper writing services have come up with Nursing Research Writing Help services for nursing coursework writing service students in order for them to score straight A’s in their nursing research paper writing services.
https://meldaresearch.com/nursing-research-writing-help/
Sonam Sharma   06.01.2021 08:47

Genuine Profiles & Trusted Escort Services In Vasant Kunj
Everyone Guys And Gentlemen If You Are Searching Beautiful Busty Sexy Call Girl In Vasant Kunj And Matured House Wife Get Full Xxx Sex In Own Flat And Your Flat Booking Short Time...feel Free To Call Us Female Vasant Kunj Escorts Service Provider Hours Opens They Can Deliver Unmatched Erotic Services To The Clients And Meet Their Desires Accordingly.
https://www.ankita-sharma.biz/escort-in-vasant-kunj/
seniorscrack official   06.01.2021 19:00
Microsoft Office Professional Plus 2013 Product Key + Crack [Upgraded]
https://bit.ly/3pVCOTS
seniorscrack official   06.01.2021 19:01

UseFull Tools
Alex-Zotov   09.01.2021 13:19
Я заметил, что на некоторых сайтах интерактивная карта не работает, нельзя увеличить масштаб или получить всплывающие подсказки, не проще ли просто разместить скриншот? Как минимум, это уменьшит число скриптов на странице.
Saskozp   09.01.2021 17:21
так и делаю, ещё и на скорость загрузки страницы влияет!
Saskozp   09.01.2021 17:21
так и делаю, ещё и на скорость загрузки страницы влияет!
thietkekhachsan   13.01.2021 10:11
Использование кода встраивания карты Google и его вставки на мой сайт замедлит ли это скорость моего сайта?
Elena_Zhmurina   сегодня в 00:06
Если загружать ее асинхронно, то не будет замедлять)
Какие виджеты поставить на сайт интернет-магазина: подборка для улучшения конверсии
9 бесплатных инструментов, чтобы провести юзабилити-тестирование сайта самостоятельно
Как провести аудит сайта самостоятельно [Руководство по сервису «Анализа сайта»]