Определить текущее местоположение через Google Maps API + HTML 5 Geolocation

Недавно, при разработке очередного WP плагина мне пришлось написать код для локального поиска на Google Map, исходя из текущего адреса/местоположения. Для решения этой задачи я использовал HTML 5 Geolocation и Google Maps Geocoding API. Итоговый результат получился довольно интересным, поэтому я решил поделиться им в этом посте…

Сразу оговорюсь, что мое решение не является 100% верным и вообще писалось за несколько часов в второпях и на коленке. Поэтому, если вы видите более рациональное/правильное решение – предлагайте в комментариях, буду очень признателен.

С чего все началось?

Вообще, изначально я разрабатывал на PhoneGap приложение для знакомств, и там очень бы пригодилась такая «фича», как определение местоположения, но к сожалению руки не дошли и поэтому все равно вернулся к этому, но только уже при разработке WP плагина. Естественно, код из плагина я перенес в приложение, поэтому он получился вдобавок еще и универсальным в применении. Далее, я по шагам попытаюсь объяснить, что и где используется в коде. Для упрощения я не брал 100% свой код 1:1, а самые важные места помечал console.log(); выводом в консоль.

HTML5 Geolocation

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

navigator.geolocation.getCurrentPosition(
    function( position ){ // все в порядке
        console.log( position );
    },
    function(){ // ошибка
    }
);

Код выше, также можно смело вставить при событии клика:

'use strict';
(function ($, window, document) {
 
    $('#get-location').click( function(e) {
        e.preventDefault();
        navigator.geolocation.getCurrentPosition(
            function( position ){ // все в порядке
                console.log( position );
            },
            function(){ // ошибка
            }
        );
    });
 
})(jQuery, window, document);

Когда пользователь щелкнет по ссылке, браузер запросит его текущее местоположение в виде всплывающего окна:

Запрос текущего местоположения

После одобрения, в консоли выведутся примерно следующие данные:

{
    coords: {
        accuracy : 0,
        altitude : 0,
        altitudeAccuracy : 0,
        heading : NaN,
        latitude : -0.0,
        longitude : 0.0,
    },
    timestamp : 0000000000000,
}

Из этих данных можно получить заветные значения широты и долготы пользователя:

var lat = position.coords.latitude;
var lng = position.coords.longitude;

Добавляем координаты в Google Map API

Для начала, необходимо сгенерировать API ключ для карт. Получить его можно здесь.

Подключаем Google карты:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key={API KEY}&ver=3.exp"></script>

Теперь можно получить позицию на карте используя LatLng метод в Google Maps JS:

var lat = position.coords.latitude;
var lng = position.coords.longitude;
var google_map_position = new google.maps.LatLng( lat, lng );

Google Геокодирование

Данные, полученные выше можно использовать для получения точной информации адреса, положения и т.п:

var google_maps_geocoder = new google.maps.Geocoder();
google_maps_geocoder.geocode(
    { 'latLng': google_map_pos },
    function( results, status ) {
        console.log( results );
    }
);

Код выше, выведет в консоли примерно следующие данные:

{
    address_components : {
        0 : 'улица',
        1 : 'город',
        2 : '..',
    },
    formatted_address : 'Отформатированный адрес',
    geometry : {}
    place_id : '',
}

Если нужно получить просто текущий адрес, можно использовать этот сниппет:

if ( status == google.maps.GeocoderStatus.OK && results[0] ) {
    console.log( results[0].formatted_address );
}

Google Chrome и SSL

Все почти готово, но есть одно «НО». Для использования HTML5 геолокации, Google Chrome требует SSL / HTTPS, поэтому перед использованием кода, необходимо выполнить небольшую проверку:

var is_chrome = /chrom(e|ium)/.test( navigator.userAgent.toLowerCase() );
var is_ssl    = 'https:' == document.location.protocol;
if( is_chrome && ! is_ssl ){
    return false;
}

На этом все. Финальный код вы можете увидеть ниже:

'use strict';
(function ($, window, document) {
 
    $('#get-location').click( function(e) {
        e.preventDefault();
 
        var is_chrome = /chrom(e|ium)/.test( navigator.userAgent.toLowerCase() );
        var is_ssl    = 'https:' == document.location.protocol;
        if( is_chrome && ! is_ssl ){
            return false;
        }
 
        navigator.geolocation.getCurrentPosition(
            function( position ){ // все в порядке
 
                var lat = position.coords.latitude;
                var lng = position.coords.longitude;
                var google_map_pos = new google.maps.LatLng( lat, lng );
 

                var google_maps_geocoder = new google.maps.Geocoder();
                google_maps_geocoder.geocode(
                    { 'latLng': google_map_pos },
                    function( results, status ) {
                        if ( status == google.maps.GeocoderStatus.OK && results[0] ) {
                            console.log( results[0].formatted_address );
                        }
                    }
                );
            },
            function(){ // ошибка
            }
        );
    });
 
 
})(jQuery, window, document);

Подписаться на новые статьи