Перейти на сайт

Добавляем Google и Яндекс карты с помощью кода

Как добавить несколько точек на карту? Как добавить карту для просмотра с Украины?

Содержание:

1. Добавляем Google карту
1.1 Простая карта с одной меткой
1.2 Многофункциональная карта с несколькими метками

2. Добавляем Яндекс карту

3. Как растянуть карту на всю ширину экрана?
4. Как выровнять карту по центру экрана?


Если вам не подходит вариант добавления карты с помощью наших стандартных виджетов, можно добавить ее через код. Основные преимущества добавления карты через код:

  1. Можно добавить несколько меток на карту. В отличие от стандартного виджета, где можно указать только одну метку.

  2. На карте есть кнопка для открытия просмотра на весь экран. В стандартных виджетах такой функции нет.

Добавить стандартный виджет карты можно по нашей инструкции:
«Kак добавить карту на страницу?»
❗Обратите внимание, что с помощью стандартных возможностей на страницу можно добавить только карту от сервиса Яндекс. Если ваши посетители будут с Украины, то у них такая карта работать не будет, поскольку на данный момент в Украине сервисы от Яндекс блокируются. Вместо Яндекс.Карты, можно подключить Google карты с помощью кода. Для добавления карты через код двигаемся дальше.
​

1. Добавляем Google карту

Есть 2 способа добавления Google карты.

1. Более простой вариант. Для него нужно выполнить меньше действий, но с помощью него можно поставить на карту только одну метку.
2. Более сложный вариант. Нужно выполнить больше действий и настроек, но с помощью него можно поставить несколько меток, линий и других элементов на карту.

1.1 Простая карта с одной меткой

Чтобы создать Google карту с одной меткой - зайдите на страницу Google карт. Далее выполним следующие действия:

  • Шаг1. Указываем нужный нам адрес в поисковой строке и нажимаем на иконку лупы, чтобы перейти к нему

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

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

  • Шаг3. После добавления метки, внизу карты появится адрес и координаты места, где она установлена. Нажмите на координаты метки, которые находятся под адресом

  • Шаг4. Метка станет большой и красной. Далее нажмите на иконку трех полос в панели управления слева, чтобы зайти в настройки карты

  • Шаг5. Нажимаем на функцию  «Ссылка/код»

  • Шаг6. Выбираем вариант «Встраивание карт», выбираем размер карты, в котором хотим видеть ее на странице и нажимаем на кнопку «Копировать HTML»

  • Шаг7. Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода». 

Скопированный код карты добавляем в настройках этого виджета

Готово! Мы добавили Google карту на страницу.

❗Важно: карта будет отображаться только в предпросмотре, или на опубликованной странице, если зайти на нее по ссылке.

На самой странице такой вариант Google карты отображается так:

1.2 Многофункциональная карта с несколькими метками

Чтобы создать Google карту с несколькими метками - зайдите на конструктор Google карт. Далее выполним следующие действия:

  • Нажимаем на кнопку «Создать новую карту»

  • Указываем нужный нам адрес в поисковой строке и нажимаем на иконку лупы, чтобы перейти к нему

  • Отметим на карте нужные нам адреса. Можно поставить несколько меток, а также по желанию добавить линии. Для этого нажмите на нужную функцию в верхней панели управления, после чего нажмите на нужное место на карте, чтобы поставить там метку или начать рисовать линию.

После добавления метки, линии или другого объекта, они также добавляются в раздел списка объектов слева (внутрь слоя). Слоев может быть несколько, и в каждом из них разные объекты. Но зачастую такой необходимости нет и вы можете оставить все объекты в одном слое, который изначально существует, и его не нужно создавать отдельно. В каком-то роде, слой выполняет функцию папки, в которой находятся объекты (объекты - это точки на карте, линии и т.д.).

Нажав на объект в списке, можно быстро перейти к нему на карте, чтобы отредактировать. 

  • Указываем название карты, слоя и объектов. Все эти названия будут отображаться у посетителя на карте, поэтому желательно дать им понятные названия.
    Чтобы изменить название объекта - нажмите на него в меню слева, далее на иконку карандаша в настройках объекта и укажите желаемое название
    ​

Чтобы изменить название карты и название слоя, достаточно нажать на них и написать желаемое название.

  • Нажимаем на кнопку «Поделиться»

Далее, на кнопку «Изменить» 

Выбираем вариант «Вкл (для всех в интернете)» и сохраняем настройки

  • После настройки доступа, нажимаем на иконку троеточия возле названия карты и на функцию «Добавить на сайт»

  • Копируем полученный код, который отобразится после нажатия на кнопку «Добавить на сайт»

  • Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода». 

Скопированный код карты добавляем в настройках этого виджета

Готово! Мы добавили Google карту на страницу.

❗Важно: карта будет отображаться только в предпросмотре, или на опубликованной странице, если зайти на нее по ссылке.

На самой странице Google карта отображается так:

Как мы видим, посетителям открыто название карты, которое мы указывали выше, кнопки увеличения и приближения карты и кнопка для открытия карты на весь экран. Также слева от названия карты мы имеем кнопку, по нажатию на которую, посетитель может посмотреть подробную информацию о карте. Эту информацию мы указывали выше, вместе с названием карты:

  • Описание карты

  • Название слоя

  • Название объектов на карте (на примере ниже у нас добавлен только 1 объект - точка)

 

2. Добавляем Яндекс карту

Чтобы создать Яндекс карту, зайдите на конструктор карт Яндекса. Далее выполним следующие действия:

  • При заходе на страницу конструктора карты, появится окно, где нужно нажать на кнопку «Создать карту»

  • Указываем нужный нам адрес в поисковой строке и нажимаем на кнопку «Найти» чтобы перейти к нему

  • Отметим на карте нужные нам адреса. Можно поставить несколько меток, а также добавить линии. Для этого нажмите на нужную функцию в верхней панели управления, после чего нажмите на нужное место на карте, чтобы поставить там метку или же начать рисовать линию.

После добавления метки или линии, они добавляются в раздел «Список объектов» слева

Чтобы редактировать уже добавленные метки, нажмите на нужную метку в этом списке, который отображается слева (нажать именно в списке, а не на саму метку, которая расположена на карте).

  • Указываем название и описание нашей карты. После чего нажимаем на кнопку «Сохранить и продолжить»

  • Выбираем вариант «Вставить на сайт» и «Интерактивная карта»

Интерактивную карту посетитель сможет приблизить/отдалить и двигать ее, чтобы сориентироваться в местности. Если выбрать вариант «Статическая карта» вместо интерактивной, то она будет отображаться на странице в формате картинки и с ней невозможно будет взаимодействовать. 

  • Указываем размер карты (ширину и высоту), в котором хотим добавить ее на страницу. Если хотите, чтобы карта была по всей ширине экрана - включите функцию «Растянуть по ширине». На самой карте, справа, будет выделяться область, которая отобразится на сайте.

Также можно не указывать размер вручную, а потянуть за край области в нужную сторону, чтобы сделать ее меньше или больше

  • Нажимаем на кнопку «Получить код карты»

  • Выберите вариант подключения карты (через JavaScript или iframe) и скопируйте полученный код

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

При подключении через JavaScript мы видим в правом верхнем углу карты есть кнопки, чтобы изменить слои карты (отображение карты со спутника или в виде схемы) и открыть карту на весь экран.

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

  • Заходим в редактор и добавляем на страницу виджет «Вставка HTML кода». 

Скопированный код карты добавляем в настройках этого виджета

Готово! Мы добавили Яндекс карту на страницу.

❗Важно: карта будет отображаться только в предпросмотре, или на опубликованной странице, если зайти на нее по ссылке.
 

3. Как растянуть карту на всю ширину экрана?

По умолчанию заданы определенные значения высоты и ширины карты, но мы их можем изменить в редакторе:
В полученном коде необходимо изменить значение width (это ширина карты) на 100%
Пример: width="100%" Теперь ширина карты у нас будет растягиваться на всю ширину виджета “html код”.
Изменяя значение height вы измените высоту карты на странице.

На примере ниже, укажем ширину карты (width) на всю ширину экрана, т.е. со значение 100%. И высоту 480 (в пикселях).

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

Готово! Теперь наш виджет с картой растянут от края до края экрана.
Проделаем тоже самое на записи:

  1. Проверим в предпросмотре, как отображается карта

  2. Изменим значение ширины карты на 100%, через код

  3. Растянем секцию с картой по ширине экрана

  4. Проверим результат в предпросмотре

 

4. Как выровнять карту по центру экрана?

Код (с картой) по умолчанию будет выравниваться по левому краю, если не задано выравнивание по центру. Это значит, что и сама карта будет отображаться в левой части экрана.
Для того чтобы разместить нашу карту по центру, необходимо прописать тег <center> до нашего кода с картой и тег </center> после кода с картой.
Пример: 

<center> код карты </center>

❗Если у карты установлена ширина 100% (как мы настраивали выше, в разделе «Как растянуть карту на всю ширину экрана?») - она изначально будет отображаться по центру. 

👆 На этом пока всё