Геоссылка

Что такое геоссылка

Геоссылка — это инструмент, который позволяет обернуть географический адрес в 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 class="ymaps-geolink">
   Москва, ул. Крылатские холмы, 26
</span>
Скопировано

Примечание. Чтобы обернуть в геоссылку название организации, нужно HTML-элементу задать атрибут data-type="biz" (подробнее см. Параметры геоссылки).

Открыть пример в песочнице

Если в результате поиска найдено несколько объектов, на карте всегда будет показан только один объект — первый из результатов выдачи. Например, при поиске отделений «Почты России» по всей Москве на карте будет показано только одно отделение:

<span class="ymaps-geolink" 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 class="ymaps-geolink"
      data-type="biz"
      data-description="Московский офис Яндекса" 
      data-bounds="[[55.729410, 37.584012],[55.738588, 37.598817]]">
Яндекс
</span>
Скопировано