Seminář PHP – Gymnázium Kolín

Úloha 26: Google Maps 1 (Places Autocomplete – Places API New) – Vzorové řešení

Vzorová implementace nejnovějšího Google Maps JavaScript API (v=weekly) s moderním rozhraním Places API (New) a prvkem PlaceAutocompleteElement. Začněte psát název podniku, instituce, města nebo ulici a vyberte z našeptávače.

Hledat místo nebo adresu (Places API New):

Filtr typů míst: Všechna místa Podniky a instituce Adresy a PSČ

Jak funguje moderní Places API (New) v Google Maps JavaScript API:

Přechod z Legacy na Places API (New): Původní třída google.maps.places.Autocomplete je v moderních Google Cloud projektech přesunuta do režimu Legacy. Nové projekty vyžadují novou službu Places API (New) a komponentu PlaceAutocompleteElement.
Výběr přes událost gmp-select: Po vybrání místa z našeptávače získáte instanci placePrediction, ze které metodou .toPlace() vytvoříte objekt místa.
Efektivní načítání polí (fetchFields): Metodou await place.fetchFields({ fields: [...] }) specifikujete pouze data, která skutečně potřebujete (displayName, formattedAddress, location, viewport), což optimalizuje spotřebu bezplatného měsíčního kreditu.
Nastavení filtrů (includedPrimaryTypes): V novém rozhraní se typy filtrují přes vlastnost includedPrimaryTypes (namísto starého setTypes()).