Seminář programování v PHP

Gymnázium Kolín

Úloha 26: Google Maps 1 (Places Autocomplete)

Pokročilý Google Maps API Places Autocomplete JavaScript události

Cíl úlohy

Vytvořte interaktivní mapovou aplikaci s využitím mapového rozhraní. Ve výchozím stavu se mapa vycentruje na město Kolín (GPS: 50.02711, 15.19993). Aplikace obsahuje chytré vyhledávací pole (Places Autocomplete), které po zadání adresy nebo názvu podniku automaticky přesune mapu na dané místo a zobrazí informační bublinu (InfoWindow).

Práce s mapovým API na webu

  • Inicializace mapy: Kontejner <div id="map_canvas"> s pevnou nebo responzivní výškou je naplněn objektem mapy.
  • Našeptávač míst (Places Autocomplete): Knihovna places napojí textové pole na databázi adres a podniků. Událost place_changed se vyvolá, jakmile uživatel vybere místo ze seznamu.
  • Centrování a zoom: Metoda map.fitBounds() nebo map.setCenter() a map.setZoom() zajistí plynulý přesun na vyhledanou lokalitu.

Úvahy a doporučený postup řešení

  • Klientský JavaScript: Většina logiky mapy probíhá na straně prohlížeče v JavaScriptu, PHP slouží pro přípravu kontejneru a případných dynamických dat.
  • Responzivita: Zajistěte, aby se kontejner mapy přizpůsobil šířce mobilního displeje (width: 100%; height: 400px;).

Doplňující otázky k zamyšlení a náměty na rozšíření

  • 1. Co je to API klíč (API Key) a proč většina moderních mapových služeb vyžaduje registraci vývojářského účtu a autorizaci klíče pro konkrétní HTTP doménu?
  • 2. Jaké existují bezplatné open-source alternativy k Google Maps (např. OpenStreetMap s knihovnou Leaflet.js nebo Mapy.cz API)?

Vyzkoušejte funkční řešení: Otevřít vzorovou úlohu gmaps.php