Добавление кнопки "Геолокация"

Open in CodeSandbox

В версии API 2.0 для определения местоположения по IP или с помощью Geolocation API разработчикам приходилось самостоятельно использовать необходимые методы и обрабатывать полученный результат (см. пример).

В API 2.1 встроен специальный элемент управления "геолокация", который позволяет отобразить географическое положение пользователя на карте. Данный элемент управления реализуется классом control.GeolocationControl, которому соответствует ключ 'geolocationControl'.

Для добавления элемента управления на карту достаточно указать соответствующий ключ в параметрах карты. 

<!DOCTYPE html>
<html>
    <head>
        <title>Добавление кнопки "Геолокация"</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="geolocation_control.js"
            type="text/javascript"
        ></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map("map", {
        center: [55.751574, 37.573856],
        zoom: 9,
        controls: ["geolocationControl"],
    });
});