Adding the "Geolocation" button

Open in CodeSandbox

In API 2.0 versions, to determine the location by IP or by using the Geolocation API, developers had to independently use the necessary methods and process the result (see the example).

The API 2.1 has a special built-in "geolocation" control, which allows you to display the user's location on the map. This control is implemented by the control.GeolocationControl class, which corresponds to the 'geolocationControl' key.

To add a control to the map, you just need to specify the appropriate key in the map parameters. 

<!DOCTYPE html>
<html>
    <head>
        <title>Examples. Adding the "Geolocation" button</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_RU&amp;apikey=<your API-key>"
            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"],
    });
});