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

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

Автор: Команда Платформы LP. Обновлено более недели назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как поставить точку на Яндекс.Карте: как добавить метки на карту

Яндекс.Карты | 2ГИС | Карта от Google с зонами | Google.Maps | Метки в Яндекс.Карты | Карты с маршрутом (Яндекс.Карты)

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

Видео: как отметить точки на Яндекс.Карте

Для работы с конструктором у вас должен быть предварительно создан аккаунт на Yandex.ru, который позволит добавлять и хранить карты в профиле для дальнейшей корректировки, и добавить на карту метку по клику.

Как создать новую карту и добавить объект на Яндекс.Карту бесплатно

Авторизуйтесь в сервисе «Яндекс» и перейдите в конструктор по адресу:
https://tech.yandex.ru/maps/tools/constructor/

Во всплывающем окне нажмите — «Создать карту».

Далее, чтобы создать точку и добавить здание на Яндекс.Картах (разместить адрес на карте), в строке поиска введите адрес местоположения вашей организации — и нажмите кнопку «Найти».

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

• измените масштаб
• в форме описания, добавьте название, адрес и контактную информацию компании
• измените цвет и тип маркера при необходимости

После внесения изменений, нажмите кнопку «Готово»,

Установка нескольких точек на карте

После внесения информации в описание, при необходимости вы можете добавить несколько меток на Яндекс.Карте. Для этого, перейдите во вкладку «Метки», и приступайте к установке точек в необходимых местах, путём нажатия левой клавиши мыши. Напомним, что вы можете добавить точку, или несколько, на карту Яндекс бесплатно. 

Примечание: для каждой точки можно установить описание, цвет и тип для их различия.

Когда вы завершите нанесение точек на Яндекс. Карту, нажмите «Сохранить и продолжить».

Настройка размера карты 

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

Вы можете указать любую ширину карты в пикселях или процентах, для того, чтобы изображение выводилось в аккуратном виде, по всей ширине содержимого раздела, следует установить галочку «Растянуть по ширине», а высоту при этом рекомендуем указать в пределах 300-350 пикселях.

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

Размещение карты на странице сайта

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

Для этого, нажмите на кнопку «JavaScript».

Скопируйте код из всплывающего окна, и разместите его в форме редактирования страницы вашего сайта. Перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту.

Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.

Во всплывающем окне, необходимо разместить полученный код.

Вставьте код в конец содержимого (место размещения указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».

После проделанных действий, нажмите кнопку «Сохранить», и проверьте вывод карты на сайте.

Теперь вы знаете, как ставить точки в Яндекс.Картах.

Пример добавления меток на карте Яндекс

FAQ — Мобильные Яндекс.Карты. Помощь

1. Начало работы
2. Поиск
3. Маршруты
4. Тип карты
5. Оффлайн карты
6. Дорожные события
7. Пробки

3

8. 00 Возможные проблемы
9. 04 4 03 Яндекс. Карты в браузере
10. Вопросы и пожелания
11. Как можно ли редактировать информацию на карте?

Поддерживаемые платформы

Яндекс.Карты поддерживаются на iOS 10.0 и выше и на Android 4.1 и выше.

Приложение не поддерживается на следующих платформах: Symbian, Java, Windows Mobile, Windows CE, bada. Мы не можем гарантировать стабильную работу Яндекс.Карт на этих платформах.

Если вы установили приложение на свое устройство под управлением iOS 6 или более ранней версии, вы можете повторно загрузить более старую версию приложения на это устройство.

Как узнать версию моей операционной системы?

Чтобы узнать версию вашей операционной системы, перейдите в «Настройки» вашего устройства и выберите «Основные» → «Об этом устройстве».

Версия вашей операционной системы указана в разделе Версия.

Как узнать, какая у меня версия приложения?

1. Коснитесь Меню .

2. Перейдите в «Настройки» → «О программе».

Где скачать приложение?

Версию для Android можно скачать в Яндекс.Магазине.

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

Чем Яндекс.Карты отличаются от Яндекс.Транспорта?

Яндекс.Навигатор предназначен для использования во время вождения. Приложение позволяет устанавливать маршруты движения и просматривать статистику поездок и информацию о парковке.

Яндекс.Карты позволяют прокладывать маршруты (автомобильные, пешие или на общественном транспорте), а также предоставлять подробную информацию о предприятиях.

Более подробное описание приложения можно найти в магазине приложений для вашего устройства.

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

Поддерживаемые языки

Яндекс. Карты поддерживают русский, английский, украинский и турецкий языки.

Приложение запустится на английском языке, если в вашем телефоне выбран язык, не включенный в этот список.

Как быстро найти определенный вид бизнеса?

Нажмите на строку поиска.

На экране появится список категорий мест. Коснитесь одной из категорий (банкоматы, заправочные станции и т. д.), чтобы найти такие места поблизости.

Подробнее см. в разделе Найти на карте.

Как я могу связаться с организацией, которую я нашел?

Чтобы позвонить в найденную организацию, нажмите «Позвонить» в карточке места.

Чтобы перейти на сайт организации, нажмите «Сайт» в карточке места.

Как отобразить подробную карточку места?

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

Как работают поисковые подсказки?

Вы можете использовать автоматические подсказки для быстрого ввода запроса.

Предложения включают список мест с названиями, похожими на введенный вами запрос. Эти места перечислены в порядке удаления от центра отображаемой карты.

Как я могу поделиться адресами, координатами или ссылками на организации или места?

Чтобы поделиться ссылкой на место, нажмите «Поделиться» (или). Эта кнопка находится на карточке места или в верхней части карты.

Как спланировать маршрут?

См. Установить маршрут.

Как проложить маршрут к определенной организации или месту?

1. Найдите организацию или место.

2. Нажмите и удерживайте точку на карте.

3. В появившемся контекстном меню нажмите «Сюда» .

Маршрут начнется от вашего текущего местоположения и закончится в выбранной точке.

Дополнительную информацию см. в разделе Настройка маршрута.

Как выбрать вариант маршрута и начать путешествие?

См. пункт Выбор маршрута.

Как я могу просмотреть свой маршрут?

См. Маршрут.

Как сбросить маршрут?

Нажмите «Отмена» или значок «Закрыть».

См. маршрут для получения дополнительной информации.

Как включить голосовые подсказки во время движения по маршруту?

Включите уведомления Play (Меню → Настройки → Маршруты → Звук).

Дополнительные сведения см. в разделах Перемещение по маршруту и ​​../concept/settings_2.html#marsrut.

Почему маршрут, который я запросил, не установлен?

На данный момент опция настройки маршрута доступна не везде. Если вы не можете установить свой маршрут, сообщите нам об этом.

Чем типы карт отличаются друг от друга?

См. раздел Тип карты.

Что такое ночной режим и как он работает?

См. ../concept/settings_2.html#interface__night_regim.

Что такое автономные карты и чем они полезны?

Офлайн-карты — это карты городов, которые сохраняются в памяти вашего телефона. С автономными картами приложение работает быстрее, и вы потребляете меньше данных.

Информацию о том, как загружать карты, см. в разделе Офлайн-карты.

Карта моего города недоступна для скачивания. Что я должен делать?

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

Что такое дорожно-транспортные происшествия?

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

Кроме того, существует еще один тип «дорожных событий», называемый «разговорами». . Это точки на карте, где вы можете начать обсуждение на любую разрешенную тему (список запрещенных тем см. в ответе на вопрос «Почему меня заблокировали в разговорах?» 9).0029

См. «Дорожные события» для получения информации о том, как просмотреть или скрыть дорожные события и как добавить их на карту.

Как долго будет отображаться дорожное предупреждение?

Сообщения о дорожных событиях будут отображаться около 20 минут. Каждое подтверждение этого события, которое мы получаем от других пользователей, продлевает это время.

Если у вас есть информация о дорожном происшествии в определенном месте (например, если вы заметили камеру наблюдения), сообщите нам об этом, написав в поддержку Яндекс.Карт.

Модерируются ли дорожные события и разговоры?

Да. Правила модерации следующие:

1. События «ДТП, камеры, дорожные работы и прочее» должны содержать информацию только о самом дорожном событии.

2. «Беседы» предназначены только для обсуждения тем, связанных с текущей дорожной ситуацией.

Сообщение любого типа будет помечено при следующих обстоятельствах:

1. Это нарушает законы этой страны.

2. Содержит нецензурную или вульгарную лексику.

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

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

4. Содержит рекламу.

5. Содержит непонятные группы слов или букв.

6. Содержит номер телефона или другую контактную информацию.

7. Содержит политические лозунги или призывы к действию.

8. Сообщает о взрыве бомбы или другой чрезвычайной ситуации, которую мы не можем проверить и которая может напугать других пользователей.

Если сообщения пользователя имеют неприемлемый контент, пользователь может быть забанен в приложении (см. Почему меня заблокировали в беседах?).

Почему меня заблокировали в «разговорах»?

Пользователь может быть заблокирован, если отправляет сообщения недопустимого содержания (см. Модерируются ли дорожные события и разговоры?).

Если вы впервые заблокированы, блокировка будет снята через 24 часа.

Блокировка не будет снята после вашего второго нарушения.

Подробнее о том, как работает Яндекс.Пробки, читайте в блоге Яндекса.

Как сообщить Яндексу о пробках?

Информация о вашем местоположении и скорости отправляется на серверы Яндекса при использовании приложения. Эти данные помогают анализировать загруженность дорог.

Внимание. Эти данные передаются анонимно и конфиденциально.

Насколько актуальна дорожная информация?

В Яндекс. Пробки отображаются данные Яндекс.Карт и Яндекс.Навигатора. Информацию о том, как отображаются данные, см. в разделе «Трафик».

Чем чаще поступают данные, тем актуальнее информация на карте. Отображение трафика изменяется в соответствии с появлением новых данных (если нет обновлений по истечении заданного времени, то трафик перестанет отображаться).

Если уведомление не отправляется

Если вам не удалось отправить push-уведомление на телефон или планшет, проверьте следующие настройки мобильного устройства:

• Доступ к сети включен. Wi-Fi или мобильные данные включены.

• Уведомления разрешены. Включите это разрешение.

• Что Яндекс.Карты могут получать уведомления. Включите это разрешение.

Расположение этих настроек зависит от марки вашего устройства. Больше информации:

• для устройств iOS

• для устройств Android

Почему приложение не может определить мое местоположение?

Возможно, вы не включили геолокацию на своем устройстве. Для включения:

• Android 4.3 и более ранние версии: в меню Настройки → Мое местоположение включите Использование GPS.

• Android 4.4: в меню Настройки → Местоположение → Режим включить Использование всех источников или Использование GPS.

• iOS: в меню Настройки → Конфиденциальность включите Службу геолокации и Поделиться геолокацией (с приложением). Если эти параметры уже включены, убедитесь, что ничто не блокирует сигнал GPS (например, крыша вашего автомобиля).

Почему виджет не работает на iOS?

Возможно, приложение Яндекс.Карты не может получить доступ к вашему местоположению.

Перейдите в Настройки → Конфиденциальность и разрешите приложению Яндекс.Карты доступ к вашему местоположению.

Как открыть карты в браузере на мобильном устройстве?

Вы можете использовать Яндекс.Карты на мобильном устройстве через приложение Яндекс. Карты.

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

Для этого наберите в адресной строке yandex.com/maps .

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

Как задать вопрос об использовании карты из браузера?

Вы можете задать любые вопросы о приложении или сообщить нам о своих предложениях на странице обратной связи.

Пожалуйста, опишите вашу ситуацию как можно подробнее, чтобы мы могли дать вам исчерпывающий ответ.

Вы можете сообщить нам о проблемах, которые возникают у вас при настройке маршрута или перемещении по маршруту, здесь:

1. Коснитесь Меню.

2. Перейдите в Настройки → Маршруты → Сохраненные маршруты.

3. В списке маршрутов выберите свой маршрут (информация о маршрутах сохраняется автоматически).

4. Напишите свои комментарии в появившейся форме и нажмите «Отправить» (или «Отмена», чтобы не отправлять).

Как добавить организацию на карту?

Как отредактировать информацию об организации?

Как изменить информацию о месте, отличном от организации?

Связаться со службой поддержки

Импорт элементов карты — Яндекс Карт Конструктор. Справка

1. KML
2. GPX
3. GeoJSON
4. CSV
5. XLSX

Вы можете импортировать элементы из файла, используя один из следующих форматов:

• GeoJSON

Для импорта:

1. Создайте новую карту, предназначенную для импорта данных из файла (данные можно импортировать только на новую карту).

   Вы можете сделать это, нажав Импорт в списке карт:

   Откроется окно Импорт:

2. Нажмите Выбрать файл и выберите файл, из которого вы хотите импортировать данные (вы можете выполнить один- импорт данных о времени из одного файла).

   Дополнительно:

3. Файлы CSV или XLSX должны соответствовать определенному шаблону. Вы можете открыть этот шаблон, нажав на соответствующую ссылку внизу окна или найти его в разделах CSV или XLSX.

Если вы импортируете данные из файла KML, карта будет включать следующее:

• Метки (координаты, описание, метка, цвет)

• Линии (все, что можно задать с помощью Конструктора)

• Полигоны (все настройки, которые можно изменить с помощью Конструктора)

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

Если исходный файл содержит группы, они не будут сохранены.

Цвет элемента будет наиболее близким к исходному, поддерживаемому Map Constructor.

Пример результатов после импорта данных из файла KML (на английском языке, но доступны другие языки):

Загрузите образец файла по этой ссылке: Образец файла KML.

Вы также можете прочитать о формате KML в разделе Экспорт элементов карты.

При импорте данных из файла GPX на карту добавляются метки (координаты, описание, метка) вместе с маршрутами и треками.

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

Пример результатов после импорта данных из файла GPX (на английском языке, но доступны и другие языки):

Загрузите образец файла по этой ссылке: Образец файла GPX.

Вы также можете прочитать о формате GPX в разделе Экспорт элементов карты.

При импорте данных из файла GeoJSON, в карта.

Если исходный файл содержит группы, они не будут сохранены.

Цвет элемента будет наиболее близким к исходному, поддерживаемому Map Constructor. Пример результатов после импорта данных из файла GeoJSON (на английском языке, но доступны и другие языки):

Скачать образец файла по этой ссылке: Образец файла GeoJSON.

Вы также можете прочитать о формате GeoJSON в разделе Экспорт элементов карты.

При импорте данных из CSV-файла на карту добавляются только метки (координаты, описание, метка, номер).

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

Пример записи в файле, подготовленном для импорта:

51.530216469

5,-0.12356737

9697,»на открытии «Кингс-Кросс»,»Кингс-Кросс Сент-Панкрас», «162» .

Скачать шаблон по этой ссылке: Шаблон CSV.

При импорте данных из файла XLSX на карту добавляются только метки (координаты, описание, метка, номер).

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

• Порядок столбцов:

  1. Широта.

  2. Долгота.

     Поля «Широта» и «Долгота» должны быть заполнены. Все остальные поля можно оставить пустыми.

     Координаты задаются в десятичном формате, где целая и десятичная части разделены точкой.

     Пример: 51,52014078866054,-0,1044968729335983 .

     Внимание.