«Делать деньги без рекламы
может только монетный двор»
Томас Маколей – публицист XIX в.
+7 (964) 334-88-68
+7 (812) 425-50-75

Ссылка на Яндекс.Карту

Ссылка на Яндекс.Карту

Не так давно разработчики Яндекс.Карт добавили официальную URL-схему, которая автоматически создаёт необходимые ссылки. Для чего это нужно:

  1. Для размещения на сайте;
  2. Для почтовых рассылок;
  3. Для блогов и так далее.

При этом вы можете задавать нужные параметры и редактировать ссылку на своё усмотрение: автоматически открывать карточку, добавлять дополнительные слои (транспорт, пробки, панорамы) и прокладывать маршруты.

Пример ссылки ниже:

<a href="/https://yandex.ru/maps/?rtext=~55.733836%2C37.588134">Построить маршрут</a> 44ad ym

Как поделиться картой

Вы можете получить ссылку в Яндексе и поделиться виджетом карты на сайте или в блоге вместе с уже проложенным маршрутом и поставленной меткой. Для этого:

  • Откройте Яндекс.Карты и найдите нужную вам организацию;
  • Выделите адрес объекта в адресной строке и скопируйте его, чтобы зафиксировать нужный фрагмент карты;
  • В Яндекс возьмите ссылку* и код для вставки виджета (размещен в открытом доступе);
  • Добавьте её на сайт.

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

*Для того, чтобы получить ссылку, найдите нужный объект, откройте его карточку и нажмите кнопку Поделиться, выберите значок социальной сети либо скопируйте предложенную ссылку, чтобы вставить её в рассылку. Также ссылку можно формировать вручную через URL Яндекса.

Как добавить карту во всплывающем уведомлении

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

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
Прописываем шаблон ссылки, как указано в примере:
<a href="#single-map" class="fan-map" data-x="58.519" data-y="31.258"data-title="точка2">точка2</a>
<div id="single-map" style="display:none">
<div id="map-title"></div>
<div id="map" style="width: 600px; height: 400px"></div>
</div>

Этот код уже задаёт параметры будущей карте. Можно настраивать на своё усмотрение, прописывать высоту и ширину в зависимости от особенностей сайта.

Следующий код предназначен для перемещения метки:

$('.fan-map').click(function () {
x = $(this).data('x'); // получаем данные из параметров ссылки
y = $(this).data('y');
$('#map-title').html($(this).data('title')); // ставим заголовок
console.log(coord); // тоже для отладки
map.geoObjects.remove(myPlacemark); // удаляем старую метку
myPlacemark = new ymaps.Placemark([x,y], { //создаем новую метку
hintContent: 'Место строительства', // в принципе эти параметры тоже можно добавить в ссылку
balloonContent: 'Место строительства'
});
map.geoObjects.add(myPlacemark); // устанавливаем метку на карту
});
$('.fan-map').fancybox(); //запускаем фансибокс

Готово

Зачем это нужно

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

©2018 «Барс». Санкт-Петербург, ул.Стахановцев, д.14, к.1, тел. +7 (964) 334-88-68, (812) 425-50-75. Создание и поддержка сайта - KmedWeb

Search