JavaRush /Курси /Модуль 4: FastAPI /Робота з Google Maps API: отримання та відображення геода...

Робота з Google Maps API: отримання та відображення геоданих

Модуль 4: FastAPI
Рівень 17 , Лекція 5
Відкрита

Google Maps API надає набір можливостей для роботи з географічними даними. Ви можете:

  • Геокодувати адреси в координати (і навпаки).
  • Створювати маршрути між точками.
  • Відображати карти в веб-застосунках, включаючи карти з маркерами, полігонами або маршрутами.

Наприклад, ви хочете створити застосунок для замовлення доставки їжі. Потрібно визначити координати клієнта за адресою, показати їх на мапі, знайти найближчу кухню і побудувати маршрут доставки. Google Maps API — ідеальний інструмент для таких задач!

Що нам знадобиться?

Для роботи з Google Maps API нам знадобляться:

  1. API-ключ, який потрібно згенерувати в Google Cloud Console.
  2. Розуміння основних можливостей API — ми будемо працювати з геокодуванням і відображенням карт.
  3. Трохи магії асинхронного програмування через FastAPI.

Отримання геоданих за допомогою Geocoding API

Геокодування — це процес перетворення текстової адреси (наприклад, "вул. В'язів, 10, Кентербері") в координати (широта і довгота). Це основа для роботи з геоданими.

Налаштування API-ключа

Перед початком роботи потрібно згенерувати API-ключ:

  1. Перейдіть в Google Cloud Console.
  2. Створіть новий проєкт або виберіть існуючий.
  3. Активуйте Geocoding API в розділі API і служби.
  4. Створіть API-ключ в розділі "У облікові дані" і збережіть його.

Встановлення httpx

Ми будемо використовувати бібліотеку httpx для відправки асинхронних HTTP-запитів. Встановіть її, якщо ще не зробили цього:

pip install httpx

Приклад отримання геоданих

Тепер створимо FastAPI-ендпоінт для перетворення адреси в координати:


from fastapi import FastAPI, HTTPException
import httpx

app = FastAPI()

GOOGLE_MAPS_API_KEY = "ваш_ключ_тут"

@app.get("/geocode/")
async def geocode(address: str):
    """Ендпоінт для отримання координат за адресою."""
    url = f"https://maps.googleapis.com/maps/api/geocode/json"
    params = {
        "address": address,
        "key": GOOGLE_MAPS_API_KEY
    }
    
    async with httpx.AsyncClient() as client:
        response = await client.get(url, params=params)
        if response.status_code != 200:
            raise HTTPException(status_code=response.status_code, detail="Помилка при запиті до Geocoding API")
        
        data = response.json()
        if "results" not in data or len(data["results"]) == 0:
            raise HTTPException(status_code=404, detail="Адресу не знайдено")
        
        location = data["results"][0]["geometry"]["location"]
        return {"latitude": location["lat"], "longitude": location["lng"]}

Як це працює?

  1. Користувач відправляє GET-запит на /geocode/ з параметром address.
  2. Ми відправляємо запит до Geocoding API з цією адресою.
  3. Отримуємо координати і повертаємо їх користувачу.

Приклад запиту:

curl "http://localhost:8000/geocode/?address=вулиця Леніна, Москва"

Приклад відповіді:

{
  "latitude": 55.755826,
  "longitude": 37.6173
}

Відображення геоданих у веб-застосунку

  • Вбудовування Google Maps в застосунок.
    Відображення мапи здійснюється через JavaScript API. Для цього ми передамо координати і ключ API у фронтенд (або HTML-сторінку).
  • Генерація мапи з маркерами.
    Створимо HTML-сторінку для показу мапи:

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=ваш_ключ_тут"></script>
    <script>
      function initMap() {
        const location = { lat: 55.755826, lng: 37.6173 }; // Приклад: Москва
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 10,
          center: location,
        });
        const marker = new google.maps.Marker({
          position: location,
          map: map,
        });
      }
    </script>
  </head>
  <body onload="initMap()">
    <div id="map" style="height: 500px; width: 100%;"></div>
  </body>
</html>

Після завантаження сторінки мапа відображається з маркером за вказаними координатами.

  • Інтеграція з FastAPI.
    Тепер створимо ендпоінт, який буде повертати мапу з заданою адресою.

from fastapi.responses import HTMLResponse

@app.get("/map/", response_class=HTMLResponse)
async def map_page(address: str):
    """Повертає мапу з маркером для вказаної адреси."""
    # Отримуємо координати
    coordinates = await geocode(address)
    html_content = f"""
    <!DOCTYPE html>
    <html>
      <head>
        <title>Google Maps Example</title>
        <script src="https://maps.googleapis.com/maps/api/js?key={GOOGLE_MAPS_API_KEY}"></script>
        <script>
          function initMap() {{
            const location = {{ lat: {coordinates['latitude']}, lng: {coordinates['longitude']} }};
            const map = new google.maps.Map(document.getElementById("map"), {{
              zoom: 10,
              center: location,
            }});
            const marker = new google.maps.Marker({{
              position: location,
              map: map,
            }});
          }}
        </script>
      </head>
      <body onload="initMap()">
        <div id="map" style="height: 500px; width: 100%;"></div>
      </body>
    </html>
    """
    return HTMLResponse(content=html_content)

Приклад запиту:

curl "http://localhost:8000/map/?address=вулиця Леніна, Москва"

Поширені помилки та їх обробка

Давайте розберемося, де все може піти не так:

  1. Невірний API-ключ. Якщо ви бачите, що API повертає "API key not valid", перевірте, чи активовані всі необхідні API.
  2. Ліміти запитів. У Google Maps є квоти на кількість запитів. Для великих систем використовуйте стратегії кешування.
  3. Порожні результати. Якщо адреса некоректна, API може повернути порожній список результатів. Завжди перевіряйте статус відповіді.

Практичне застосування

Знання з цієї лекції відкривають безліч можливостей:

  • Створення застосунків для доставки, таксі або кур'єрської служби.
  • Розробка географічних інформаційних систем (ГІС).
  • Інтеграція мап в особисті проєкти, такі як трекери подорожей.

Якщо здається, що щось упущено — не переймайтесь. Ми ще будемо заглиблюватися в асинхронну обробку запитів і оптимізацію API в наступних лекціях. А поки — вперед, прокладати маршрути і навігацію! 🚀

Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ