ССЫЛКА НА ЯНДЕКС.КАРТУ

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

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

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

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

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

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

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

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

Или вы можете воспользоваться 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(); //запускаем фансибокс

Готово. 

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

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

ПОЗВОНИТЕ МНЕ
+
Жду звонка!