Определить текущее местоположение через 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. Подробнее о нем вы можете прочитать тут. Ниже код, который все реализует:

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Chrome и SSL

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

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

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

  • Евгений

    А вы случаем еще для Yandex map такое не реализовывали? 🙂

    • Нет, к сожалению для yamap не делал

      • Евгений

        Ок спс возможно сам попробую.