Преобразование гео-координат в город через API Google Maps
Быстрый ответ
Для того, чтобы выяснить название вашего города, используя геолокацию, сначала вам потребуется определить географические координаты через Geolocation API. Затем примените полученные данные о широте и долготе в API обратного геокодирования. В результате вы получите подробную информацию об интересуемом вас месте. Рассмотрим пример с использованием функции navigator.geolocation
совместно с безоплатным API от bigdatacloud
:
navigator.geolocation.getCurrentPosition(async (position) => {
const { latitude: lat, longitude: lon } = position.coords; // Ваши координаты определены!
const res = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=ru`);
const { city } = await res.json(); // И вот название вашего города!
console.log(`Город, в котором вы находитесь: ${city}`);
}, console.log);
Учтите, что обработка возможных ошибок, а также особенностей поддержки браузеров, — важная часть задачи.

Элегантная обработка сбоев
Ошибки могут произойти по различным причинам, в частности, из-за отказа пользователя предоставить информацию о собственном местоположении. Важно корректно обрабатывать такие случаи и предоставлять пользователям ясные сообщения об ошибке:
function errorCallback(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
console.error("Пользователь отказал в доступе к информации о его геолокации."); // Уважайте выбор пользователя!
break;
case error.POSITION_UNAVAILABLE:
console.error("Были проблемы с получением информации о местоположении."); // Возможно, проблемы с соединением
break;
case error.TIMEOUT:
console.error("Время ожидания ответа от геолокационного сервиса истекло."); // Это можно использовать для улучшения сервиса.
break;
case error.UNKNOWN_ERROR:
console.error("Произошла неизвестная ошибка."); // Необходимо разобраться в причинах и устранить её.
break;
}
}
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
Выбор API на рынке
Существует множество альтернатив Google Maps API для обратного геокодирования. Некоторые из них предлагают уникальные функциональные возможности. Рассмотрим два примера:
- Geolocation-db.com API: данный сервис позволяет получить информацию о геолокации без необходимости согласия пользователя. Прекрасно подходит для случаев, когда нужно сохранить анонимность.
$.getJSON('https://geolocation-db.com/json/')
.done (data => {
console.log(data.city); // Получили название города
});
- Ipinfo.io: этот сервис предоставляет информацию о местоположении по IP-адресу. Особенно эффективен, если вы хорошо разбираетесь в классах IP.
$.getJSON('https://ipinfo.io', data => {
console.log(data.city); // И название города пользователя теперь известно
});
API, приведенные в примерах, просты в использовании и идеально подходят для маленьких приложений, не требующих получения большого объема информации.
Расшифровка JSON для «недоначитанных»
Данные от API обратного геокодирования поступают в формате JSON. В этом "ящике с сокровищами" вы найдёте разных компонентов адреса: как город, область и страну, так и полный адрес – formatted_address. Главное – уметь их правильно извлечь:
// Предположим, geocoderResult – это успешный ответ от геокодера
let city;
$.each(geocoderResult.address_components, function(i, component) {
if (component.types[0] === "locality") {
city = component.long_name;
return false; // Всё, город найден, дальше искать не нужно.
}
});
console.log(`Название вашего города: ${city}`); // И вуаля, название города перед нами!
С помощью этого метода можно пройти по каждому компоненту адреса и выделить нужные данные о городе.
Визуализация
Возможно, это будет полезно для ваших внутренних представлений: вот как выглядит процесс определения местоположения и получения имени города:
🌐 — это наша огромная планета, а вы — это маленькая точка "X":
🌐
X
Эта "X" символизирует ваше местоположение, которое вы определите с помощью геолокации.
Эта маленькая "X" превращается в конкретное название города!
Всё, что вам нужно, – передать координаты в API:
📍 (X) ➡️ 📘 (API) ➡️ 🏙️ (Название города)
Так, подобно истинным исследователям, вы преобразуете простые географические координаты в конкретное название города.
Цена знания: ограничения и стоимость API
Важно помнить о ограничениях использования API: многие из них предоставляют ограниченное число бесплатных запросов и начинают взимать плату, как только вы превышаете установленный лимит. Также следует обращать внимание на возможность настройки языка ответов.
const languageParam = 'ru'; // Вы можете указать язык ответа, в данном случае, русский.
Это особенно актуально при использовании Google Maps Geocoding API: всегда проверяйте статус ответа google.maps.GeocoderStatus.OK
, чтобы быть уверенным, что запрос был успешным.
Уважение к личной информации: обращение с данными пользователей
Всегда получайте явное согласие от пользователя перед тем, как использовать информацию о его местоположении. Будьте прозрачны в отношении того, как вы собираетесь использовать эту информацию, и предлагайте альтернативы тем, кто отказывается от геолокации.
Полезные материалы
- MDN Web Docs: Geolocation API — подробное руководство по использованию геолокационного API в веб-разработке.
- Geolocation API Specification – W3C — официальная спецификация API геолокации.
- HTML Geolocation API – W3Schools — обучающий материал по реализации геолокации в HTML.
- Geolocation API overview | Google for Developers — документация разработчиков Google по использованию API геолокации.
- Overview – Nominatim Manual — руководство по API Nominatim от OpenStreetMap для бесплатного определения геопозиции.
- GeoNames Web Service Documentation — документация веб-сервисов GeoNames для доступа к расширенной географической информации.