Как создать и вставить Яндекс.Карту на сайт: как разместить код из конструктора карт на сайте

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

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

Видео: как добавить Яндекс.Карту на сайт

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

Как создать Яндекс.Карту для сайта

Для добавления Яндекс.Карты на сайт, перейдите в конструктор карт Яндекс для сайта по ссылке: https://tech. yandex.ru/maps/tools/constructor/. Авторизуйтесь, используя свой логин и пароль для создания и хранения карт на своем аккаунте, чтобы в дальнейшем вы могли бы изменить карту на сайте при необходимости.

Далее выполните следующие шаги:

Создание новой Яндекс.Карты

Для начала необходимо сделать карту Яндекса. При переходе в сервис, Вам будет предложено начать с создания новой карты в своем аккаунте. Выберите во всплывающем окне — Создать новую карту

Поиск адреса на карте

Далее, используя строку поиска, введите адрес местоположеня Вашей компании, офиса, магазина, с точностью до дома. Нажмите кнопку — Найти.

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

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

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

*Для того, чтобы контактная информация во всплывающей подсказке была размещена построчно, используйте в конце каждой строки (кроме последней) код для переноса строки — <br />

Сохранение созданной карты

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

Следующий шаг — финальная настройка виджета Яндекс.Карты для сайта и режима ее отображения на странице перед вставкой карты на сайт.

Перед тем, как встроить Яндекс.Карту на сайт, вам необходимо указать размер интерактивной карты, которая будет выводиться в разделе с контактной информацией. Для того, чтобы аккуратно интегрировать карту на сайт, рекомендуем установить галочку «Растянуть по ширине», а высоту при этом указать в пределах 300-400px.

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

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

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

Как вставить код карты Яндекс для сайта в HTML

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

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

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

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

Сохраните раздел после редактирования.

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

Пример созданной карты

Как вставить Яндекс карту на сайт WordPress (Видео Уроки WordPress )

Текстовый транскрипт видео:

Здравствуйте, в эфире Дмитрий Татаринов, автор блога https://www.azoogle.ru/!

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

После того, как вы определи адрес, вы можете расставить дополнительные опознавательные знаки. Например, точки и подписи. К примеру, если вы хотите сделать, отметить какие-то объекты, то вы можете задать цвет, вставить произвольную подпись, отметить определенный маршрут с помощью рисования линий или при желании отметить отдельные объекты при помощи инструмента «Многоугольник». После того, как вы отметили объект, вы можете также расставить подписи и метки, выбрать различные цвета.

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

Если вы хотите вставить Яндекс-карту на WordPress сайт, то здесь есть несколько особенностей, которые надо учитывать.

По умолчанию визуальный редактор WordPress не разрешает использование тегов «скрипт», т.е. не разрешает использования java скрипта напрямую в визуальном редакторе. Т.е. если вы хотите использовать интерактивную карту, то вы можете вставить её в режиме текстового редактора и нажать кнопку «Опубликовать». В данном случае карта отобразится. Но если вы переключитесь на визуальный редактор, то WordPress автоматически уберет запрещенные теги и в следующий раз, когда вы переключитесь на тестовую вкладку, то вы не увидите здесь кода, который вы используете. Поэтому из этой ситуации есть несколько выходов.

Первый – это можно воспользоваться статичной картой. В данном случае карта будет отображаться как рисунок, т.е. вы можете использовать её, вставив её на вкладке текстового редактора. Если вы переключитесь на визуальный, то она будет отображаться как рисунок. Все будет работать, и WordPress не будет убирать код.

Второй — если же вы хотите воспользоваться интерактивной картой и в тоже самое время, чтобы каждый раз не переключаться и не вставлять заново этот код, вы можете воспользоваться плагином «Custom Fields Shortcode».

«Custom Fields Shortcode» позволяет добавить фрагмент кода в пользовательское поле и потом использовать его в любом месте записи. Если по умолчанию у вас панель пользовательских полей не видна, перейдите в «Настройки экрана» и поставьте галочку «Произвольные поля». После этого у вас появится панель «Произвольных полей», где вы можете добавить.

Т.е. если мы сейчас хотим добавить, к примеру, пользовательское поле «Яндекс-карта» и в значении этого пользовательского поля указать, что мы хотим, чтобы при отображении его на сайте включался такой код с картой, т. е. здесь мы можем отредактировать параметры, к примеру, увеличить ширину карты до 640 пикселей при высоте в 450 пиксилей, т.е. если мы сейчас добавим в пользовательском поле Яндекс-карту, то его значение будет непосредственно наша интерактивная карта, т.е. сейчас я добавляю.

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

[[cf][/cf]]

, т.е. в custom fields, и внутри написать то поле, которое я хочу использовать. Т.е. в данном случае, если хочу использовать карту «Yandex Map». Т.е. теперь визуальный редактор воспринимает этот код как shortcode, он разрешен и он не будет убирать ваше значение, которое вы туда добавили. Но при отображении, если мы нажмем кнопку «Обновить», на странице будет выводиться значение произвольного поля, что в данном случае будет отображаться как интерактивная карта Яндекс, которую пользователь может точно также использовать, как если бы он находился непосредственно на сайте Яндекс.

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

Если у вас возникли проблемы с просмотром – вы можете посмотреть видео «Уроки WordPress Как вставить Яндекс карту на сайт WordPress» на YouTube.

Часто задаваемые вопросы. Руководство разработчика

Общие вопросы

• Как добавить карту на свой сайт?
• Могу ли я бесплатно использовать API Яндекс.Карт на своем сайте?
• Есть ли ограничения в API Яндекс.Карт?
• Как получить ключ для бесплатной версии JavaScript API?
• Нужен ли мне ключ для бесплатной версии HTTP API Geocoder?
• Как правильно указать ключ в коде?
• Нужен ли ключ для бесплатной версии Static API?
• Как я узнаю о превышении ограничений в бесплатной версии API Яндекс. Карт?
• Какие браузеры поддерживает API Яндекс.Карт?
• Можно ли использовать API Яндекс.Карт для отображения собственных карт?
• Можно ли отображать карты Яндекса через сторонний API?
• Могу ли я использовать API для получения данных, не отображая их на карте?
• Могу ли я сохранить ответ от HTTP API Geocoder?
• Удаляются ли определенные версии JavaScript API Яндекс.Карт?
• Доступен ли поиск предприятий в JavaScript API?
• Какие виды бизнеса включены в Places API?

Технические вопросы

• Как я могу использовать определенную версию API JavaScript?
• Как я могу вставить карту в блог, если он не поддерживает скрипты?
• Можно ли использовать API Яндекс.Карт на сайте с CSP?
• Я использую JavaScript API для отображения карты на своем веб-сайте, но карта не отображается. Что я делаю не так?
• Могу ли я сохранить состояние карты в URL-адресе?
• Как я могу добавить на карту свой собственный слой карты?
• Почему геолокация перестала работать (или не показывает точное местоположение) на моем сайте?
• Когда я устанавливаю свойства или параметры для объектов карты, они не применяются. Что может быть причиной этой проблемы?
• Можно ли изменить внешний вид точек маршрута?
• Почему метки не отображаются на карте при использовании кластеризации?
• Я хочу вычислить площадь многоугольника/прямоугольника/окружности на геодезической поверхности. Есть ли для этого специальный инструмент в API?
• Геокодер возвращает пустой ответ или результат неправильного типа. Что я должен делать?

Конструктор карт

• Могу ли я редактировать карту, созданную в Конструкторе карт?
• Могут ли другие пользователи видеть список моих карт?
• Могу ли я сотрудничать с другими пользователями и редактировать одну и ту же карту?
• Кто может видеть мою карту?
• Когда я открываю файл CSV в Microsoft Excel, я получаю сообщение об ошибке кодирования. Что я должен делать?
• Как переместить карту в другую учетную запись?

Коммерческая версия API Яндекс.Карт

• Чем коммерческая версия API Яндекс. Карт отличается от бесплатной?
• Какие сервисы доступны в коммерческой версии API Яндекс.Карт?
• Как узнать, могу ли я использовать бесплатную версию API или мне нужно приобрести коммерческую версию API?
• За какие операции взимается плата в коммерческой версии JavaScript API?
• Как учитываются запросы при подсчете ежедневного использования сервиса?
• Я хочу приобрести коммерческую версию API Яндекс.Карт. Что я должен делать?
• Я использую один и тот же ключ для разных сервисов. Суммируются ли мои запросы к этим службам или суммируются отдельно?
• Что произойдет, если я превышу купленную сумму?
• Где я могу просмотреть информацию о ценах и переплатах?
• Могу ли я получить пробный ключ к коммерческой версии JavaScript API?
• Могу ли я получить пробный ключ к коммерческой версии Places API?
• В тарифных планах указана только цена за год. Есть ли возможность оплаты по месяцам?
• Где я могу отслеживать статистику запросов? Как часто обновляется статистика?
• Могу ли я перенести ключ на другую учетную запись (например, если мой сотрудник уволится)?
• Я забыл пароль к учетной записи, на которую зарегистрирован ключ. Что я должен делать?
• Почему коммерческая версия не поддерживает слои Satellite и Hybrid? В бесплатной версии они есть.
• Я использую бесплатную версию API Яндекс.Карт, но посещаемость моего сайта/приложения увеличивается. Как я могу отслеживать количество запросов к API, чтобы знать, когда переходить на коммерческую версию API?
• Мой проект не будет использовать службы геокодирования, маршрутизации или поиска панорам. Сколько будет стоить лицензия только на JavaScript API?

Другое

• У меня есть вопрос, которого нет в списке. К кому я могу обратиться?

Как добавить карту на свой сайт?

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

Могу ли я бесплатно использовать API Яндекс.Карт на своем сайте?

Вы можете бесплатно пользоваться API Яндекс.Карт при соблюдении всех требований, перечисленных в разделе Условия использования API Яндекс.Карт. Если вы не можете выполнить одно или несколько требований, вам необходимо приобрести коммерческую версию API. Чтобы использовать API, вам нужно получить ключ.

Есть ли ограничения в API Яндекс.Карт?

Бесплатная версия API имеет следующие ограничения:

• Ограничение на общее количество запросов к сервисам геокодирования, маршрутизации и панорамы Яндекса составляет 25 000 запросов в сутки . Учитывайте это ограничение, если вы используете API JavaScript или HTTP API геокодера. Подробнее о лимитах.

• Максимальное количество запросов к Places API — 500 запросов в день .

Если вам нужно увеличить лимиты, приобретите коммерческую версию API.

Как получить ключ для бесплатной версии JavaScript API?

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

Нужен ли ключ для бесплатной версии HTTP API Geocoder?

HTTP API Geocoder доступен только при использовании ключа. Получить ключ можно в Личном кабинете разработчика.

Как правильно указать ключ в коде?

Нужен ли ключ для бесплатной версии Static API?

Нет. Для использования бесплатной версии Static API ключ не нужен.

Какие браузеры поддерживает API Яндекс.Карт?

В документации есть список поддерживаемых браузеров (список регулярно обновляется). Полная функциональность всех функций JavaScript API гарантируется только в версии 9. 0131 последние версии поддерживаемых браузеров.

Обратите внимание, что коммерческая версия JavaScript API не поддерживает Internet Explorer 8.

Можно ли использовать API для получения данных, не отображая их на карте?

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

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

Можно ли использовать API Яндекс.Карт для отображения собственных карт?

Да. Вы можете использовать API Яндекс.Карт для отображения собственных карт или карт сторонних сервисов.

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

Можно ли отображать карты Яндекса через сторонний API?

Нет. Это запрещено.

Могу ли я сохранить ответ от HTTP API Geocoder?

Нет. Вам не разрешено сохранять ответ HTTP API Geocoder (см. пункт 4 условий использования). Однако вам разрешено кэшировать ответ на срок до 30 дней.

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

Удаляются ли определенные версии JavaScript API Яндекс.Карт?

Да. Со временем мы можем отказаться от устаревшей дополнительной версии JavaScript API. Если вы использовали эту версию в своем проекте, вы автоматически переключитесь на новейшую версию API. Обратите внимание, что обновление версии может привести к тому, что ваше приложение перестанет работать правильно. По этой причине мы рекомендуем вам следить за обновлениями API и как можно скорее переходить на более новые версии. Подробнее о версиях API.

Доступен ли поиск предприятий в JavaScript API?

Чтобы включить поиск компаний в JavaScript API, установите поставщика поиска «yandex#search». Откройте пример

Вы также можете использовать HTTP API Places. Обратите внимание, что максимальное количество запросов к этому сервису составляет 500 запросов в день . Если вы превысите этот лимит, доступ к данным будет заблокирован до начала следующего дня. Если вам нужно увеличить дневной лимит, приобретите коммерческую версию API.

Какие виды бизнеса включены в Places API?

В этом файле (формат .xlsx) вы можете увидеть доступные типы предприятий.

Как использовать определенную версию API JavaScript?

Для этого укажите номер версии в ссылке подключения. Например: