Геоссылка

Open in CodeSandbox

Геоссылка — простой способ добавить на сайт ссылку на Яндекс.Карты. Достаточно обернуть нужный адрес в специальные теги. При клике по геоссылке откроется всплывающее окно с картой и меткой по указанному адресу.

При нажатии на кнопку «Подробнее о месте» откроются интерактивные Яндекс.Карты с подробной информацией о заданной точке.

Если нажать кнопку «Как добраться», откроются Яндекс.Карты со включенным режимом построения маршрута. В качестве конечной точки на карте будет автоматически указан заданный адрес. Пользователю достаточно будет указать только начальную точку.

Подробное описание. 

<!DOCTYPE html>
<html>
    <head>
        <title>Геоссылка</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Чтобы добавить на страницу геоссылку, необходимо загрузить код API с модулем Geolink.

        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?load=Geolink&amp;lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <style type="text/css">
            #whiteText {
                background-color: #110;
                color: white;
                padding: 5px 0px 5px 8px;
            }

            #box {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                font-family: Arial, sans-serif;
                font-size: 15px;
                line-height: 22px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!-- Чтобы добавить на страницу геоссылку, необходимо обернуть нужный текст в HTML-элемент с CSS-классом «ymaps-geolink»
    и загрузить код API с модулем Geolink.-->
            <p>
                <span class="ymaps-geolink"
                    >Москва, ул. Льва Толстого, 16</span
                >
                — адрес офиса.
            </p>

            <!-- Геоссылке могут быть заданы различные параметры: область поиска объекта (data-bounds), тип объекта (data-type),
        поясняющий текст, который будет отображен в шапке всплывающего окна (data-description). -->
            <p id="whiteText">
                <span
                    class="ymaps-geolink"
                    data-bounds="[[55.73333783240489,37.586741441564136],
        [55.73433517114847,37.59017466910319]]"
                    data-type="biz"
                    >Кафе</span
                >, которое вы можете посетить рядом с нами.
            </p>
            <p>
                Проезд до станции метро «Парк культуры» (кольцевая). Из
                дверей метро нужно повернуть направо и идти по
                Комсомольскому проспекту около 250 метров. Второй поворот
                направо — на улицу Тимура Фрунзе. По ней нужно дойти до
                красного кирпичного здания с табличкой «дом 11, стр 2-5»,
                шлагбаумом и указателями с логотипом Яндекса.
            </p>
            <p>
                Если же вам нужно попасть в Яндекс.Деньги, пройдите до
                <span
                    class="ymaps-geolink"
                    data-bounds="[[55.63333783240489,37.486741441564136],
        [55.75433517114847,37.69017466910319]]"
                    data-type="geo"
                    >Льва Толстого, 18Б</span
                >.
            </p>
        </div>
    </body>
</html>