X

👆 Введите фразу в поле поиска! 👆

FAQ

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

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

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

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

Метка компании на карте


Пошагово:

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

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

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

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

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


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

  1. Найдите адрес, выберите цвет и вид маркера.
  2. Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.
  3. При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.
  4. Сохраните карту. В следующем окне выберите ее вид: интерактивная или статическая.
    1. Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.
    2. Статическая будет выглядеть как картинка, ее можно распечатывать.
  5. Задайте размер карты: можно ввести пиксели в окошке размера или растянуть карту вручную.
  6. Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.
  7. Скопируйте код для вставки на сайт: можно выбрать JavaScript или iframe.
    1. У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.
    2. Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.
  8. Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.
  9. Вставьте код с картой Яндекса на сайт через редактор страницы.

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

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

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

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

Google карта для вставки на сайт
  1. Найдите компанию на картах, нажмите на «Поделиться».
  2. Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.
  3. Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.

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

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

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

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


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

  1. Введите адрес или название компании.
  2. Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.
  3. Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».
  4. Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.

Как вставить карту 2ГИС на сайт

Встроить карту через API

Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.

Как встроить карту 2ГИС на сайт


Пошаговый процесс:

  1. Перейдите на страницу и выберите город.
  2. Найдите компанию по названию.
  3. Установите нужный размер карты в правом нижнем углу.
  4. Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.
  5. Нажмите «Получить код» и скопируйте его для вставки на сайт.

Это простая карта с готовой меткой, но можно сделать свою через Кjнструктор. Выручит, если вашей компании нет в 2ГИС.