Как вставить карту в html

Как‌ ‌добавить‌ ‌карту‌ ‌Google,‌ ‌Яндекс‌ ‌и‌ ‌2ГИС‌ ‌на‌ ‌ сайт:‌ ‌просто‌ ‌по‌ ‌шагам‌

Как вставить карту с магазином или офисом на сайт и как настроить lazy-loading для карты, чтобы она не тормозила загрузку. Обновленный материал.

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

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

В статье:

Как создать карту для сайта:
1. Карта Яндекс
2. Карта Google
3. Карта 2ГИС
Выбрать можно любую карту, какая вам больше нравится.

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

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

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

Создание карты пошагово:
1. Найдите адрес, выберите цвет и вид маркера.
2. Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.
3. При желании добавьте линии и нарисуйте фигуры, чтобы сделать маршрут понятнее. Линии можно изменять по изгибам улиц.
4. Сохраните карту. В следующем окне выберите ее вид: интерактивная или статическая.
  1. Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.
  2. Статическая будет выглядеть как картинка, ее можно распечатывать.
  1. У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.
  2. Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.
  Интересное для работы с Яндексом:
  Как попасть в колдунщики
  
  Как вставить Google карту на сайт
  
  Первый вариант: вставить карту из Google Maps с существующей меткой
  
  Откройте Google Maps, найдите компанию и скопируйте код для вставки:
  1. Найдите компанию на картах, нажмите на «Поделиться».
  2. Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.
  3. Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.
  Второй вариант: создать свою метку в Google Maps
  
  Пошаговое создание метки на Google картах:
  1. Введите адрес или название компании.
  2. Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.
  3. Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».
  4. Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.
  Как вставить карту 2ГИС на сайт
  
  Встроить карту через API
  
  Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.
  1. Перейдите на страницу и выберите город.
  2. Найдите компанию по названию.
  3. Установите нужный размер карты в правом нижнем углу.
  4. Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.
  5. Нажмите «Получить код» и скопируйте его для вставки на сайт.
  Это простая карта с готовой меткой, но можно сделать свою через Кjнструктор. Выручит, если вашей компании нет в 2ГИС.
  
  Создать в Конструкторе карту со своими метками
  
  В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.
  
  Пошагово как сделать карту в Конструкторе 2ГИС:
  
  Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.
  
  Загрузка карты по доскроллу до нее
  
  Если карта находится внизу страницы далеко в футере или в поп-апе, можно настроить, чтобы она загружалась не сразу при переходе на страницу, а только когда пользователь до нее доскроллит.
  
  Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.
  
  Пример исходного кода:
  Его нужно изменить вот так:
  Браузер будет получать src = «», когда читателю понадобится карта.
  
  Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):
  
  Расскажите в комментариях, как вы сделали карту для вашего сайта и как оптимизируете ее, чтобы она не сильно тормозила загрузку?
  
  Как вставить на сайт Google-карту #50902
  
  Необходимо пройти по ссылке http://maps.google.ru/maps и ввести адрес месторасположения в графу поиска.
  
  Шаг 2
  
  Затем нажать на кнопку «Поделиться».
  
  Шаг 3
  
  В открывшеся окне перейдите к вкладке «Встраивание карт».
  
  Шаг 4
  
  Далее необходимо выбрать подходящий размер карты.
  
  Шаг 5
  
  Затем из нажать на кнопку «Копировать HTML».
  
  Шаг 6
  
  Зайдите в редактор страницы и нажмите на кнопку «HTML».
  - Например, если Вы хотите разместить карту на отдельной странице, просто перейдите к редактированию нужной текстовой страницы и в текстовом редакторе данной страницы нажмите на кнопку «HTML» (см. скриншот ниже). Также Вы можете разместить карту в общих блоках.
  Разместите код карты ниже всего кода страницы и нажмите «Ок» и «Сохранить изменения».
  
  Обратите внимание!
  - Для корректного отображения карты Вам может потребоваться указать в настройках ключ API. О том, что это такое, как его получить и где указывать — читайте в инструкции по ссылке.
  Мы создаём веб-сайты для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.
  
  Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.
  
  Этот сайт был создан на платформе
  CMS S3 от Megagroup.ru
  
  Данный сайт защищен с помощью reCAPTCHA и соответствует
  Политике конфиденциальности и Условиям использования Google.
  
  Как вставить Google карту на сайт
  
  Всем частным компаниям или государственным организациям необходимо размещать в контактах карту их местоположения. Поисковая система Google, позволяет бесплатно вставить карту на сайт. Сделать это можно двумя разными способами, но сначала подготовим секцию на нашем сайте, куда будет вставляться HTML-код карты.
  
  HTML + CSS код
  
  Добавляем в разметку секцию map. В стилях пропишем отступы по 40 пикселей сверху и снизу от окна браузера и разместим карту в центре. Добавим блок container, который будет ограничивать ширину карты до 1000 пикселей.
  
  // CSS
  .map padding: 40px 0;
  text-align: center;
  >
  
  .container max-width: 1000px;
  margin: 0 auto;
  >
  
  h2 font-size: 35px;
  font-family: ‘Arial Narrow Bold’, sans-serif;
  margin-bottom: 20px;
  >
  
  Первый способ
  
  1) Получить код карты
  
  На сайте Google Maps найдите интересующий вас объект или введите адрес в строке поиска. Сразу автоматически на нем установится метка.
  
  Открываем иконку бургер-меню и выбираем пункт «Ссылка/код».
  
  В отдельном окошке, переходите во вкладку «Встраивание карт», далее открываете «Копировать HTML»
  
  2) Вставить код карты на сайт
  
  Вставляем скопированный код в секцию map, между тегами с классом container вместо фразы код карты. Чтобы карта растянулась на всю ширину контейнера, заменим дефолтное значение у width (600) на 100%.
  
  Теперь карта стоит на вашем сайте и видна всем посетителям.
  
  Второй способ
  
  У второго способа больше настроек, можно добавлять несколько слоев. Переходите на Google My Maps и нажимаете на кнопку «Создать новую карту». После выбора иконки «Добавить маркер», появится окошко, куда вы можете добавить свое описание товара или услуги, фото или видео и изменить стиль маркера.
  
  Добавим название и описание карты.
  
  После этого, переходите на ссылку «Поделиться».
  
  Обозначим круг читателей, кому карта может быть доступна.
  
  Выбираем в списке меню «Добавить на сайт».
  
  Появляется окно с HTML кодом, который нужно скопировать и добавить на сайт.
  
  Подгружается карта с немного другим внешним видом.
  
  Создано 05.06.2020 10:21:56
5. Михаил Русаков