Как добавить Яндекс карту на сайт
В этой статье рассмотрим установку Яндекс карт без использования плагина, поэтому это подойдет как для обычного сайта, так и для сайта созданного на движке WordPress. О том как добавить Google карты читайте тут.
Яндекс карты (Yandex maps) – отличный инструмент, который позволит сообщить о местоположении офиса, склада или магазина. Разместив на сайте Яндекс нарту, с подробной схемой проезда, можно быть уверенным, что клиент не заблудиться.
Если вы владелец интернет-магазина, то можно оснастить форму заказа картой, которая позволит указать клиенту свое место положения, что значительно сэкономит время ожидания. Да и курьер будет благодарен.
В Яндекс картах есть схемы метро и данные о пробках, что позволит избежать ряда неудобств и сэкономит время.
Если представить к сравнению Яндекс и Google карты (добавление Google карт на сайт), то мое предпочтение будет отдано именно сервису Яндекс карт, так как он предлагает для пользователя более широкие возможности. Не говоря уже о том, что Яндекс карты имеют лучшую детализацию, а так же народную карту, которую редактируют по спутниковым снимкам сами пользователи.
Пожалуй, с прелюдией закончим, как говорится: «Лучше один раз увидеть…».
Установка (добавление) Яндекс карты на свой сайт
Перед тем, как установить Яндекс карту на свой сайт, ее необходимо создать. Сделать это можно в конструкторе карт:
http://api.yandex.ru/maps/tools/constructor/
При переходе по ссылке вы увидите страницу:
- Воспользовавшись поиском найдите интересующий вас город, либо конкретный район/адрес.
- Установка точек позволит создать точку с описанием, которое будет появляться при клике по этой точке (маркеру). Можно задать цвет и нумерацию.
- Рисование линий – удобно, если нужно проложить маршрут.
- Рисование многоугольника.
- Можно выбрать 4 варианта отображения карты: схема, спутник, гибрид, народная карта.
Осталось только ввести название карты, сохранить и получить код Яндекс карты.
Копируем код:
Данный код карты легко вставить в WordPress виджет произвольного текста или html-кода:
Выделенные фрагменты это высота и ширина, так что их можно изменять без необходимости вновь возвращаться на страницу конструктора карт.
Так же можно вставить код карты в WordPress запись или на страницу. Единственный момент – вставлять нужно в html-редакторе, а не в визуальном.
Результат работы:
Для создания раньше использовался api-ключ. В настоящее время его использование не обязательно. Однако, вам следует прочитать некоторые рекомендации Яндекса:
http://api.yandex.ru/maps/form.xml
Маршрутизация — https://tech.yandex.ru/maps/jsbox/2.1/multiroute_driving
Пробки — https://tech.yandex.ru/maps/jsbox/2.1/traffic_control/?from=mapsfeatures
Так же есть возможность определять местоположение пользователя и многое другое.
Примеры кода этих и других карт можно посмотреть в песочнице api Яндекса:
http://api.yandex.ru/maps/jsbox/2.1/deliveryCalculator
Один из примеров (маршрутизация и стоимость) встроил на свой сайт. Выберите 2 точки на карте, затем нажмите на начальную точку, во всплывшем окне будет информация о стоимости доставки.
needsite.net
Как вставить Яндекс Карты на сайт html, wordpress и всех других
Всем привет! Сегодня, я хочу вам рассказать о том, как добавить на свой сайт карту от Яндекса. Конечно, сразу напрашивается вопрос, зачем это надо? Если ответить коротко, то это нужно, чтобы вас нашли. Другой вопрос, кому это нужно? Нужно это многим сайтам, поговорим обо всем этом ниже.
Кому это надо?
Вопрос, зачем это надо, подробнее рассматривать не буду. Это элементарно — установка яндекс карты на сайт, нужна просто для того, чтобы ваши оффлайн клиенты, вас нашли. Всегда удобнее найти магазин или офис по карте. Возможно, есть и другие применения для этого сервиса, в этом случае, свои мысли вы можете высказать в комментариях, где я с удовольствием с вами пообщаюсь!
Ну а теперь идем дальше. На очень многих сайтах визитках, можно увидеть контакты, адрес, а также, другие сведения, например, часы работы. Все эти данные, ориентированы для привлечения клиентов в свой офис. К сожалению, далеко не всегда, имеется карта, как доехать. А жаль. Карту на сайт можно поставить легко и быстро. А клиентам компании, это поможет сэкономить кучу времени. И нужна карта для очень многих сайтов: крупным компаниям, мелким магазинам, различным мастерским. Список можно продолжать до бесконечности.
Как вставить Яндекс Карту на сайт.
Одним из крупнейших картографических сервисов в рунете, является – Яндекс Карты. Есть еще и другой, от компании Гугл. Но сегодня, будет разговор именно про Яндекс Карты.
Для установки Яндекс Карты, нужно получить код, а затем, полученный код, вставить в нужное место на сайте. И не важно, на какой платформе ваш сайт. Данная инструкция подойдет и для сайтов на html, и для wordpress и для любых других движков. Достаточно того, чтобы он поддерживал вставку скриптов, что на сегодняшний день, предоставляет практически любой платный хостинг (да и большинство бесплатных).
Для установки, вначале нужно перейти по ссылке — yandex.ru/map-constructor/
Кликните на Создать карту, затем, выберите имя карты, сохранить и продолжить.
Ну а дальше, можно выбрать тип карты, размер в пикселях, сразу же можно задать нужный масштаб, местоположение карты. Ну и нажать на кнопку – получить код карты.
Конструктор карт выдаст код карты, который останется просто добавить на свой сайт.
Полученный код карты, нужно вставить на ваш сайт. Если это просто сайт на HTML, то просто вставьте его в нужное место.
Или же, если к примеру, у вас сайт на популярной CMS WordPress, то вы можете установить его в код либо самой статьи и для этого, вам совсем не нужен какой либо плагин, но вставку нужно делать, в режиме «Текст»
либо, можно вставить в виджет.
Только не забудьте, выровнять ширину и высоту карты, поскольку, разместив ее в боковом виджете, вы должны вписать ее в вашу ширину боковой колонки.
Ну а теперь, вот что у меня вышло.
Так что все работает, проверено лично.
Loading… 
JavaScript API — Геоссылка — Технологии Яндекса
Что такое геоссылка
Геоссылка — это инструмент, который позволяет обернуть географический адрес в HTML-тексте в ссылку на Яндекс.Карты. Когда пользователь кликнет по геоссылке, откроется всплывающее окно — в нем будет отображаться статическая карта с меткой по указанному адресу.
При нажатии на кнопку «Подробнее о месте» откроются интерактивные Яндекс.Карты с подробной информацией о заданной точке. Если нажать кнопку «Как добраться», откроются Яндекс.Карты со включенным режимом построения маршрута.
Открыть пример в песочнице
Какой текст можно сделать геоссылкой
В геоссылку можно обернуть следующий текст:
адрес объекта, например «Москва, улица Льва Толстого»;
географические координаты, например [55.124, 37.234];
топоним, например «река Волга»;
название организации, например «кафе Шоколадница».
Если указать произвольный текст (например, «Наш офис»), во всплывающем окне будет содержаться сообщение об ошибке:
Как добавить геоссылку
Чтобы обернуть текст в геоссылку, необходимо:
- Загрузить на страницу код API с модулем Geolink. Для этого нужно в заголовок HTML-страницы вставить строку:
<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU&load=Geolink" type="text/javascript"></script> Обернуть нужный текст в HTML-элемент с CSS-классом «ymaps-geolink»:
<span> Москва, ул. Крылатские холмы, 26 </span>
data-type="biz" (подробнее см. Параметры геоссылки).Открыть пример в песочнице
Если в результате поиска найдено несколько объектов, на карте всегда будет показан только один объект — первый из результатов выдачи. Например, при поиске отделений «Почты России» по всей Москве на карте будет показано только одно отделение:<span data-type="biz">
Москва, Почта России
</span>Параметры геоссылки
Геоссылке могут быть заданы различные параметры, например область поиска. Параметры задаются в атрибутах HTML-элемента, в котором определена геоссылка. Могут быть заданы следующие параметры:
data-type— тип объекта, который нужно показать на карте. Может принимать одно из двух значений: «geo» (географический объект) и «biz» (организация). Если параметр не задан, то по умолчанию используется тип «geo». Если для типа «geo» не было найдено ни одного объекта, то будет использоваться тип «biz». Обратите внимание, одновременное задание двух значений «geo» и «biz» не допускается.data-bounds— границы географической области, в которой находится искомый объект. Границы задаются координатами левого нижнего и правого верхнего углов области. Координаты указываются в последовательности «широта, долгота». Например,[[55.729410, 37.584012], [55.738588, 37.598817]]. Данный параметр рекомендуется указывать, если в геоссылке задан неполный адрес объекта, например без указания города или области («ул. Ленина»).data-description— поясняющий текст, который будет отображен в шапке всплывающего окна (см. иллюстрацию ниже). Если не указывать этот атрибут, то в шапке будет отображаться адрес объекта. Обратите внимание, что размеры текстового поля ограничены — в поле помещаются только первые 3 строки. Оставшуюся часть текста пользователь не увидит.
Примечание. Все атрибуты являются необязательными.
<span
data-type="biz"
data-description="Московский офис Яндекса"
data-bounds="[[55.729410, 37.584012],[55.738588, 37.598817]]">
Яндекс
</span>tech.yandex.ru