Usługa geokodowania

Uwaga: biblioteki po stronie serwera
Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Przegląd

Geokodowanie to proces przekształcania adresów (np. „1600 Amphitheatre Parkway, Mountain View, CA”) we współrzędne geograficzne (np. szerokość geograficzna 37.423021 i długość geograficzna -122.083739), których można używać do umieszczania znaczników lub pozycjonowania mapy.

Odwrotne geokodowanie to proces przekształcania współrzędnych geograficznych w adres zrozumiały dla człowieka (patrz Odwrotne geokodowanie (wyszukiwanie adresu)).

Możesz też użyć geokodera, aby znaleźć adres dla danego identyfikatora miejsca.

Interfejs Maps JavaScript API udostępnia klasę Geocoder do geokodowania i odwrotnego geokodowania dynamicznie na podstawie danych wejściowych użytkownika. Jeśli chcesz geokodować statyczne, znane adresy, zapoznaj się z informacjami o usłudze internetowej geokodowania.

Rozpocznij

Zanim zaczniesz korzystać z usługi geokodowania w Maps JavaScript API, upewnij się, że interfejs Geocoding API jest włączony w konsoli Google Cloud w tym samym projekcie, który został skonfigurowany na potrzeby Maps JavaScript API.

Aby wyświetlić listę włączonych interfejsów API:

  1. Otwórz konsolę Google Cloud.
  2. Kliknij przycisk Wybierz projekt, a następnie wybierz ten sam projekt, który został skonfigurowany dla interfejsu Maps JavaScript API, i kliknij Otwórz.
  3. Na liście interfejsów API w panelu znajdź Geocoding API.
  4. Jeśli interfejs API jest na liście, nie musisz nic więcej robić. Jeśli interfejsu API nie ma na liście, włącz go:
    1. U góry strony kliknij WŁĄCZ API, aby wyświetlić kartę Biblioteka. Możesz też wybrać Biblioteka w menu po lewej stronie.
    2. Wyszukaj Geocoding API, a następnie wybierz go z listy wyników.
    3. Kliknij WŁĄCZ. Po zakończeniu procesu Geocoding API pojawi się na liście interfejsów API w panelu.

Ceny i zasady

Ceny

Informacje o cenach i zasadach korzystania z usługi geokodowania JavaScript znajdziesz w sekcji Korzystanie i rozliczenia dotyczącej interfejsu Geocoding API.

Zasady

Korzystanie z usługi geokodowania musi być zgodne z zasadami dotyczącymi Geocoding API.

Żądania geokodowania

Dostęp do usługi geokodowania jest asynchroniczny i wymaga wywołania serwera zewnętrznego. Z tego powodu metoda geocode zwraca obietnicę, która jest spełniana po zakończeniu żądania. Po rozwiązaniu możesz użyć .then() lub await, aby obsłużyć odpowiedź.

re

Dostęp do usługi geokodowania interfejsu API Map Google uzyskujesz w kodzie za pomocą obiektu konstruktora google.maps.Geocoder. Metoda Geocoder.geocode() inicjuje żądanie do usługi geokodowania, przekazując jej literał obiektu GeocoderRequest zawierający dane wejściowe i metodę wywołania zwrotnego, która ma zostać wykonana po otrzymaniu odpowiedzi.

Literał obiektu GeocoderRequest zawiera te pola:

{
 address: string,
 location: LatLng,
 placeId: string,
 bounds: LatLngBounds,
 componentRestrictions: GeocoderComponentRestrictions,
 region: string
}

Wymagane parametry: musisz podać tylko jedno z tych pól:

  • address – adres, który chcesz geokodować.
         lub
    location – LatLng (lub LatLngLiteral), dla których chcesz uzyskać najbliższy adres zrozumiały dla człowieka. Geokoder wykonuje odwrotne geokodowanie. Więcej informacji znajdziesz w artykule Odwrotne geokodowanie.
         lub
    placeId – identyfikator miejsca, dla którego chcesz uzyskać najbliższy adres zrozumiały dla człowieka. Dowiedz się więcej o pobieraniu adresu dla identyfikatora miejsca.

Parametry opcjonalne:

  • bounds – LatLngBounds, w którym wyniki geokodowania mają być bardziej faworyzowane. Parametr bounds będzie tylko wpływać na wyniki geokodera, a nie całkowicie je ograniczać. Więcej informacji o ustawianiu widocznego obszaru znajdziesz poniżej.
  • componentRestrictions – służy do ograniczania wyników do określonego obszaru. Więcej informacji o filtrowaniu komponentów znajdziesz poniżej.
  • region – kod regionu określony jako dwuznakowy (nienumeryczny) podtag regionu Unicode. W większości przypadków te tagi są mapowane bezpośrednio na znane dwuznakowe wartości ccTLD („domena najwyższego poziomu”). Parametr region będzie miał wpływ na wyniki geokodera, ale nie będzie ich w pełni ograniczał. Więcej informacji o dostosowywaniu do kodu regionu znajdziesz poniżej.
  • extraComputations – jedyną dozwoloną wartością tego parametru jest ADDRESS_DESCRIPTORS. Więcej informacji znajdziesz w artykule o  deskryptorach adresów.
  • fulfillOnZeroResults – spełnij obietnicę dotyczącą stanu ZERO_RESULT w odpowiedzi. Może to być pożądane, ponieważ nawet przy braku wyników geokodowania mogą być zwracane dodatkowe pola na poziomie odpowiedzi. Więcej informacji znajdziesz w sekcji Realizacja w przypadku braku wyników.

Odpowiedzi geokodowania

Usługa geokodowania wymaga metody wywołania zwrotnego, która zostanie wykonana po pobraniu wyników geokodera. To wywołanie zwrotne powinno przekazywać 2 parametry, które zawierają results i kod status (w tej kolejności).

Wyniki geokodowania

Obiekt GeocoderResult reprezentuje pojedynczy wynik geokodowania. Żądanie geokodowania może zwrócić wiele obiektów wynikowych:

results[]: {
 types[]: string,
 formatted_address: string,
 address_components[]: {
   short_name: string,
   long_name: string,
   postcode_localities[]: string,
   types[]: string
 },
 partial_match: boolean,
 place_id: string,
 postcode_localities[]: string,
 geometry: {
   location: LatLng,
   location_type: GeocoderLocationType
   viewport: LatLngBounds,
   bounds: LatLngBounds
 }
}

Pola te zostały opisane poniżej:

  • types[] to tablica wskazująca typ adresu zwróconego wyniku. Ta tablica zawiera zbiór co najmniej 0 tagów identyfikujących typ funkcji zwracanej w wyniku. Na przykład kod geograficzny „Chicago” zwraca „locality”, co oznacza, że „Chicago” to miasto, oraz „political”, co oznacza, że jest to jednostka polityczna. Więcej informacji o typach adresów i typach komponentów adresów znajdziesz poniżej.
  • formatted_address to ciąg tekstowy zawierający zrozumiały dla człowieka adres tej lokalizacji.

    Często jest on taki sam jak adres pocztowy. Pamiętaj, że w niektórych krajach, np. w Wielkiej Brytanii, ze względu na ograniczenia licencyjne nie można rozpowszechniać prawdziwych adresów pocztowych.

    Sformatowany adres składa się logicznie z co najmniej 1 komponentu adresu. Na przykład adres „111 8th Avenue, New York, NY” składa się z tych komponentów: „111” (numer domu), „8th Avenue” (ulica), „New York” (miasto) i „NY” (stan w USA).

    Nie analizuj sformatowanego adresu automatycznie. Zamiast tego użyj poszczególnych komponentów adresu, które odpowiedź interfejsu API zawiera oprócz sformatowanego pola adresu.

  • address_components[] to tablica zawierająca osobne komponenty, które mają zastosowanie do tego adresu.

    Każdy komponent adresu zawiera zwykle te pola:

    • types[] to tablica wskazująca typ komponentu adresu. Jeśli nie ma znanych typów dla danego komponentu adresu, tablica typów może być pusta. W razie potrzeby interfejs API może dodawać nowe wartości typu. Więcej informacji znajdziesz w sekcji Typy adresów i typy komponentów adresowych.
    • long_name to pełny opis tekstowy lub nazwa komponentu adresu zwrócona przez geokoder.
    • short_name to skrócona nazwa tekstowa komponentu adresu, jeśli jest dostępna. Na przykład komponent adresu dla stanu Alaska może mieć wartość long_name „Alaska” i short_name „AK” (dwuliterowy skrót pocztowy).

    Zwróć uwagę na te informacje o tablicy address_components[]:

    • Tablica komponentów adresu może zawierać więcej komponentów niż formatted_address.
    • Tablica nie musi zawierać wszystkich jednostek politycznych, które zawierają adres, oprócz tych, które są zawarte w formatted_address. Aby pobrać wszystkie jednostki polityczne, które zawierają określony adres, użyj odwrotnego geokodowania, przekazując szerokość i długość geograficzną adresu jako parametr żądania.
    • Nie ma gwarancji, że format odpowiedzi będzie taki sam w przypadku różnych żądań. W szczególności liczba address_components zależy od żądanego adresu i może się zmieniać w czasie dla tego samego adresu. Komponent może zmienić pozycję w tablicy. Typ komponentu może się zmienić. W późniejszej odpowiedzi może brakować określonego komponentu.

    Więcej informacji o typach adresów i typach komponentów adresów znajdziesz poniżej.

  • partial_match wskazuje, że geokoder nie zwrócił dopasowania ścisłego do pierwotnego żądania, ale udało mu się dopasować część żądanego adresu. Sprawdź, czy w pierwotnym żądaniu nie ma błędów pisowni lub niekompletnego adresu.

    Częściowe dopasowania występują najczęściej w przypadku adresów, które nie istnieją w miejscowości podanej w żądaniu. Częściowe dopasowania mogą być też zwracane, gdy żądanie pasuje do co najmniej 2 lokalizacji w tej samej miejscowości. Na przykład „Hillpar St, Bristol, UK” zwróci częściowe dopasowanie zarówno dla Henry Street, jak i Henrietta Street. Pamiętaj, że jeśli żądanie zawiera błędnie wpisany element adresu, usługa geokodowania może zasugerować alternatywny adres. Sugestie wywołane w ten sposób będą również oznaczone jako częściowe dopasowanie.

  • place_id to unikalny identyfikator miejsca, którego można używać z innymi interfejsami API Google. Możesz na przykład użyć place_id z biblioteką Google Places API, aby uzyskać szczegółowe informacje o firmie działającej lokalnie, takie jak numer telefonu, godziny otwarcia, opinie użytkowników i inne. Zobacz omówienie identyfikatorów miejsc.
  • postcode_localities[] to tablica zawierająca wszystkie miejscowości w danym kodzie pocztowym. Jest ona obecna tylko wtedy, gdy wynik jest kodem pocztowym zawierającym wiele miejscowości.

  • geometry zawiera te informacje:

    • location zawiera wartość szerokości i długości geograficznej. Zwróć uwagę, że zwracamy tę lokalizację jako obiekt LatLng, a nie jako sformatowany ciąg znaków.
    • location_type przechowuje dodatkowe dane o określonej lokalizacji. Dostępne wartości:
      • ROOFTOP oznacza, że zwrócony wynik odzwierciedla dokładny kod geograficzny.
      • RANGE_INTERPOLATED wskazuje, że zwrócony wynik odzwierciedla przybliżoną lokalizację (zwykle na drodze) interpolowaną między 2 dokładnymi punktami (np. skrzyżowaniami). Wyniki interpolowane są zwykle zwracane, gdy kody geograficzne dachu są niedostępne dla adresu.
      • GEOMETRIC_CENTER wskazuje, że zwrócony wynik jest geometrycznym środkiem wyniku, takiego jak linia łamana (np. ulica) lub wielokąt (region).
      • APPROXIMATE wskazuje, że zwrócony wynik jest przybliżony.

    • viewport przechowuje zalecany widoczny obszar dla zwróconego wyniku.
    • bounds (opcjonalnie zwracany) przechowuje LatLngBounds, który może w pełni zawierać zwrócony wynik. Pamiętaj, że te granice mogą nie odpowiadać zalecanemu widocznemu obszarowi. (Na przykład San Francisco obejmuje wyspy Farallon, które są częścią miasta, ale nie powinny być zwracane w obszarze widocznego ekranu).

Adresy są zwracane przez geokoder przy użyciu preferowanego ustawienia języka przeglądarki lub języka określonego podczas wczytywania interfejsu API JavaScript za pomocą parametru language. (więcej informacji znajdziesz w artykule na temat lokalizacji).

Typy adresów i typy komponentów adresów

Tablica types[] w obiekcie GeocoderResult w odpowiedzi wskazuje typ adresu. Przykłady typów adresów to adres pocztowy, kraj lub jednostka polityczna. Tablica types w obiekcie GeocoderAddressComponent wskazuje typ każdej części adresu. Przykłady: numer domu lub kraj.

Adresy mogą mieć wiele typów. Typy mogą być traktowane jako „tagi”. Na przykład wiele miast jest oznaczonych typami political i locality.

Następujące typy są obsługiwane i zwracane zarówno w tablicach typów adresów, jak i typów komponentów adresów:

Typ adresu Opis
street_address dokładny adres,
route nazwana trasa (np. „US 101”).
intersection Główne skrzyżowanie, zwykle 2 głównych dróg.
political Podmiot polityczny. Zwykle ten typ wskazuje wielokąt jakiejś administracji cywilnej.
country Narodowy podmiot polityczny, zwykle najwyższy poziom zwracany przez geokoder.
administrative_area_level_1 Jednostka administracyjna pierwszego rzędu poniżej poziomu kraju. W Stanach Zjednoczonych są to stany. Nie wszystkie kraje używają tych poziomów administracyjnych. W większości przypadków krótkie nazwy administrative_area_level_1 będą ściśle odpowiadać podregionom ISO 3166-2 i innym powszechnie używanym listom. Nie możemy jednak tego zagwarantować, ponieważ nasze wyniki geokodowania są oparte na różnych sygnałach i danych o lokalizacji.
administrative_area_level_2 Jednostka administracyjna drugiego rzędu poniżej poziomu kraju. W Stanach Zjednoczonych są to hrabstwa. Nie wszystkie kraje używają tych poziomów administracyjnych.
administrative_area_level_3 Jednostka administracyjna trzeciego rzędu poniżej poziomu kraju. Ten typ wskazuje mniejszą jednostkę administracyjną. Nie wszystkie kraje używają tych poziomów administracyjnych.
administrative_area_level_4 Jednostka administracyjna czwartego rzędu poniżej poziomu kraju. Ten typ wskazuje mniejszą jednostkę administracyjną. Nie wszystkie kraje używają tych poziomów administracyjnych.
administrative_area_level_5 Jednostka administracyjna piątego rzędu poniżej poziomu kraju. Ten typ wskazuje mniejszą jednostkę administracyjną. Nie wszystkie kraje używają tych poziomów administracyjnych.
administrative_area_level_6 Jednostka administracyjna 6 rzędu poniżej poziomu kraju. Ten typ wskazuje mniejszą jednostkę administracyjną. Nie wszystkie kraje używają tych poziomów administracyjnych.
administrative_area_level_7 Jednostka administracyjna 7 rzędu poniżej poziomu kraju. Ten typ wskazuje mniejszą jednostkę administracyjną. Nie wszystkie kraje używają tych poziomów administracyjnych.
colloquial_area Powszechnie używana alternatywna nazwa podmiotu.
locality podmiot polityczny miasta lub miejscowości;
sublocality Jednostka administracyjna pierwszego rzędu poniżej miejscowości. W przypadku niektórych lokalizacji możesz otrzymać jeden z dodatkowych typów: od sublocality_level_1 do sublocality_level_5. Każdy poziom dzielnicy jest jednostką administracyjną. Im większa liczba, tym mniejszy obszar geograficzny.
neighborhood nazwana okolica,
premise Nazwana lokalizacja, zwykle budynek lub zbiór budynków o wspólnej nazwie.
subpremise Element podlegający adresowaniu poniżej poziomu lokalu, np. mieszkanie, lokal lub apartament.
plus_code Zakodowane odniesienie do lokalizacji, uzyskane na podstawie szerokości i długości geograficznej. Kodów Plus można używać zamiast adresów ulic w miejscach, gdzie nie ma adresów (gdzie budynki nie są ponumerowane lub ulice nie mają nazw). Więcej informacji znajdziesz na stronie https://plus.codes.
postal_code Kod pocztowy używany do adresowania przesyłek pocztowych na terenie danego kraju.
natural_feature wyrazisty obiekt naturalny,
airport Lotnisko.
park Park z nazwą.
point_of_interest Nazwane ciekawe miejsce. Zwykle są to znane lokalne obiekty, które nie pasują do żadnej innej kategorii, np. „Pałac Kultury i Nauki” czy „Wieża Eiffla”.

Pusta lista typów oznacza, że nie ma znanych typów dla danego komponentu adresu (np. Lieu-dit we Francji).

Oprócz powyższych komponenty adresu mogą obejmować typy wymienione poniżej.

Uwaga: ta lista nie jest wyczerpująca i może ulec zmianie.

Oprócz powyższych komponenty adresu mogą zawierać typy wymienione poniżej.

Typ elementu adresu Opis
floor Piętro w adresie budynku.
establishment Zwykle jest to miejsce, które nie zostało jeszcze skategoryzowane.
landmark Miejsce w pobliżu, które służy jako punkt odniesienia ułatwiający nawigację.
point_of_interest Nazwane ciekawe miejsce.
parking Parking lub zadaszony parking.
post_box konkretną skrytkę pocztową,
postal_town Grupowanie obszarów geograficznych, takich jak locality i sublocality, używane w adresach pocztowych w niektórych krajach.
room Numer pokoju w adresie budynku.
street_number Dokładny numer domu.
bus_station, train_station i transit_station Lokalizacja przystanku autobusowego, kolejowego lub transportu publicznego.

Kody stanu

Kod status może zwracać jedną z tych wartości:

  • "OK" oznacza, że nie wystąpiły żadne błędy, adres został pomyślnie przeanalizowany i zwrócono co najmniej 1 kod geograficzny.
  • "ZERO_RESULTS" oznacza, że kodowanie geograficzne zakończyło się powodzeniem, ale nie zwróciło żadnych wyników. Może się tak zdarzyć, jeśli do geokodera przekazano nieistniejący element address.
  • "OVER_QUERY_LIMIT" oznacza, że limit został przekroczony.
  • "REQUEST_DENIED" oznacza, że Twoja prośba została odrzucona. Strona internetowa nie może używać geokodera.
  • "INVALID_REQUEST" zwykle oznacza, że brakuje zapytania (address, components lub latlng).
  • "UNKNOWN_ERROR" oznacza, że nie udało się przetworzyć żądania z powodu błędu serwera. Jeśli spróbujesz ponownie, żądanie może zostać zrealizowane.
  • "ERROR" oznacza, że upłynął limit czasu żądania lub wystąpił problem z połączeniem z serwerami Google. Jeśli spróbujesz ponownie, żądanie może zostać zrealizowane.

Przykład geokodowania

Poniższy przykład pokazuje, jak geokodować adres i umieścić znacznik w miejscu o zwróconych wartościach szerokości i długości geograficznej. Wynik geokodowania jest obsługiwany za pomocą obietnicy. Kliknij dowolne miejsce na mapie, aby uzyskać kod geograficzny adresu w tej lokalizacji.

TypeScript

async function geocode(request: google.maps.GeocoderRequest) {
    clear();
    const { LatLng } = await google.maps.importLibrary('core');

    try {
        const response = await geocoder.geocode(request);
        const { results } = response;

        innerMap.setCenter(results[0].geometry.location);
        marker.position = new LatLng(results[0].geometry.location);
        mapElement.append(marker);
        responseDiv.style.display = 'block';
        responsePre.innerText = JSON.stringify(response, null, 2);
        return results;
    } catch (e) {
        alert(
            'Geocode was not successful for the following reason: ' + String(e)
        );
    }
}

JavaScript

async function geocode(request) {
    clear();
    const { LatLng } = await google.maps.importLibrary('core');

    try {
        const response = await geocoder.geocode(request);
        const { results } = response;

        innerMap.setCenter(results[0].geometry.location);
        marker.position = new LatLng(results[0].geometry.location);
        mapElement.append(marker);
        responseDiv.style.display = 'block';
        responsePre.innerText = JSON.stringify(response, null, 2);
        return results;
    } catch (e) {
        alert(
            'Geocode was not successful for the following reason: ' + String(e)
        );
    }
}

Zobacz kompletny przykład.

Ustawianie widocznego obszaru

Możesz poinstruować usługę geokodowania, aby preferowała wyniki w danym widocznym obszarze (wyrażonym jako ramka ograniczająca). Aby to zrobić, ustaw parametr bounds w obiekcie GeocoderRequest, aby zdefiniować granice tego widocznego obszaru. Pamiętaj, że faworyzowanie tylko preferuje wyniki w granicach. Jeśli poza tymi granicami istnieją bardziej trafne wyniki, mogą one zostać uwzględnione.

Na przykład kod geograficzny dla „Winnetka” zwykle zwraca to przedmieście Chicago:

{
  "types":["locality","political"],
  "formatted_address":"Winnetka, IL, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["locality","political"]
  },{
    "long_name":"Illinois",
    "short_name":"IL",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location":[ -87.7417070, 42.1083080],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJW8Va5TnED4gRY91Ng47qy3Q"
}

Jeśli jednak określisz parametr bounds definiujący ramkę ograniczającą dla San Fernando Valley w Los Angeles, ten kod geograficzny zwróci dzielnicę o nazwie „Winnetka” w tej lokalizacji:

{
  "types":["sublocality","political"],
  "formatted_address":"Winnetka, California, USA",
  "address_components":[{
    "long_name":"Winnetka",
    "short_name":"Winnetka",
    "types":["sublocality","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_3","political"]
  },{
    "long_name":"Los Angeles",
    "short_name":"Los Angeles",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"California",
    "short_name":"CA",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "geometry":{
    "location": [34.213171,-118.571022],
    "location_type":"APPROXIMATE"
  },
  "place_id": "ChIJ0fd4S_KbwoAR2hRDrsr3HmQ"
}

Dostosowywanie kodu regionu

Możesz ustawić usługę geokodowania tak, aby zwracała wyniki faworyzujące określony region, używając parametru region. Ten parametr przyjmuje kod regionu określony jako dwuznakowy (nienumeryczny) podtag regionu Unicode. Te tagi są mapowane bezpośrednio na znane dwuznakowe wartości ccTLD („domena najwyższego poziomu”), takie jak „uk” w „co.uk”. W niektórych przypadkach tag region obsługuje też kody ISO-3166-1, które czasami różnią się od wartości ccTLD (np. „GB” dla „Wielkiej Brytanii”).

Podczas korzystania z parametru region:

  • Podaj tylko jeden kraj lub region. Wiele wartości jest ignorowanych i może spowodować niepowodzenie żądania.
  • Używaj tylko 2-znakowych podtagów regionu (format Unicode CLDR). Wszystkie inne dane wejściowe spowodują błędy.
  • Obsługiwane są tylko kraje i regiony wymienione w szczegółach dotyczących zasięgu Google Maps Platform.

Żądania geokodowania można wysyłać w przypadku każdej domeny, w której główna aplikacja Map Google oferuje geokodowanie. Pamiętaj, że faworyzowanie tylko preferuje wyniki z określonej domeny. Jeśli poza tą domeną istnieją bardziej trafne wyniki, mogą one zostać uwzględnione.

Na przykład kod geograficzny dla „Toledo” zwraca ten wynik, ponieważ domyślna domena usługi geokodowania jest ustawiona na Stany Zjednoczone:

{
  "types":["locality","political"],
  "formatted_address":"Toledo, OH, USA",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Ohio",
    "short_name":"OH",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"United States",
    "short_name":"US",
    "types":["country","political"]
  }],
  "place_id": "ChIJeU4e_C2HO4gRRcM6RZ_IPHw"
}

Kod geograficzny dla „Toledo” z polem region ustawionym na 'es' (Hiszpania) zwróci hiszpańskie miasto:

{
  "types":["locality","political"],
  "formatted_address":"Toledo, España",
  "address_components":[{
    "long_name":"Toledo",
    "short_name":"Toledo",
    "types":["locality","political"]
  },{
    "long_name":"Toledo",
    "short_name":"TO",
    "types":["administrative_area_level_2","political"]
  },{
    "long_name":"Castilla-La Mancha",
    "short_name":"CM",
    "types":["administrative_area_level_1","political"]
  },{
    "long_name":"España",
    "short_name":"ES",
    "types":["country","political"]
  }],
  "place_id": "ChIJ8f21C60Lag0R_q11auhbf8Y"
}

Filtrowanie komponentów

Możesz ustawić usługę geokodowania tak, aby zwracała wyniki adresowe ograniczone do określonego obszaru, używając filtra komponentów. Określ filtr w parametrze componentRestrictions. Wartości filtrów obsługują te same metody korekty pisowni i częściowego dopasowania co inne żądania geokodowania.

Geokoder zwraca tylko wyniki, które pasują do wszystkich filtrów komponentów. Oznacza to, że ocenia specyfikacje filtra jako AND, a nie OR.

Filtr komponentów składa się z co najmniej 1 z tych elementów:

  • route pasuje do długiej lub krótkiej nazwy trasy.
  • locality dopasowuje typy miejscowości i podmiejscowości.
  • administrativeArea pasuje do wszystkich poziomów regionu.
  • postalCode dopasowuje kody pocztowe i prefiksy kodów pocztowych.
  • country odpowiada nazwie kraju lub dwuliterowemu kodowi kraju w standardzie ISO 3166-1. Uwaga: interfejs API definiuje kraje zgodnie ze standardem ISO, a filtrowanie działa najlepiej, gdy używasz odpowiedniego kodu ISO kraju.

Ten przykład pokazuje, jak użyć parametru componentRestrictions do filtrowania według country i postalCode:

async function codeAddress(request: google.maps.GeocoderRequest) {
    clear();
    geocoder.geocode({
        componentRestrictions: {
            country: 'AU',
            postalCode: '2000'
        }
    })
    .then((result) => {
        const { results } = result;
        innerMap.setCenter(results[0].geometry.location);
        let marker = new google.maps.marker.AdvancedMarkerElement({
            map: innerMap,
            position: results[0].geometry.location
        });
    })
    .catch((e) => {
        alert('Geocode was not successful for the following reason: ' + e);
    });
};

Realizuj w przypadku braku wyników

W przypadku odwrotnego geokodowania obietnica jest domyślnie łamana w status=ZERO_RESULTS. Jednak w takim przypadku dodatkowe pola poziomu odpowiedzi plus_code i address_descriptor mogą nadal być wypełnione. Jeśli parametr fulfillOnZeroResults ma wartość „true”, to pole jest wypełniane. Jeśli parametr fulfillOnZeroResults ma wartość true, obietnica nie jest łamana, a te dodatkowe pola są dostępne z poziomu obietnicy, jeśli są obecne.

Poniżej znajdziesz przykład takiego zachowania w przypadku szerokości i długości geograficznej na Antarktydzie. Nawet jeśli nie ma wyników odwrotnego geokodowania, możemy wydrukować plus code w obiekcie promise, jeśli ustawimy fulfillOnZeroResults=true. 

function addressDescriptorReverseGeocoding() {
  var latlng = new google.maps.LatLng(-75.290330, 38.653861);
  geocoder
    .geocode({
      'location': latlng,
      'fulfillOnZeroResults': true,
    })
    .then((response) => {
      console.log(response.plus_code);
    })
    .catch((error) => {
      window.alert(`Error: ${error}`);
    });
}

Deskryptory adresu

Deskryptory adresów zawierają dodatkowe informacje, które pomagają opisać lokalizację za pomocą punktów orientacyjnych i obszarów. Aby poznać tę funkcję, obejrzyj prezentację deskryptorów adresów.

Deskryptory adresów można włączyć za pomocą parametru extraComputations. Aby otrzymać deskryptory adresu w odpowiedzi, uwzględnij extra_computations=ADDRESS_DESCRIPTORS w żądaniu geokodowania, żądaniu odwrotnego geokodowania lub żądaniu geokodowania miejsc.

Przykład geokodowania miejsc

To zapytanie zawiera adres miejsca w Delhi.

function addressDescriptorPlaceIdLookup() {
  geocoder.geocode({
  geocoder.geocode({
    'placeId': 'ChIJyxAX8Bj9DDkRgBfAnBYa66Q',
    'extraComputations': ['ADDRESS_DESCRIPTORS']
    }, function(results, status) {
    if (status == 'OK') {
      console.log(results[0].address_descriptor);
    } else {
      window.alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

Przykład odwrotnego geokodowania

To zapytanie zawiera wartość szerokości i długości geograficznej lokalizacji w Delhi.

    function addressDescriptorReverseGeocoding() {
      var latlng = new google.maps.LatLng(28.640964,77.235875);
      geocoder
        .geocode({
          'location': latlng,
          'extraComputations': ["ADDRESS_DESCRIPTORS"],
        })
        .then((response) => {
          console.log(response.address_descriptor);
        })
        .catch((error) => {
          window.alert(`Error`);
        });
    }

Przykład deskryptora adresu

Oto przykład: address_descriptor.

  {
    "address_descriptor" : {
       "areas" : [
          {
             "containment" : "OUTSKIRTS",
             "display_name" : {
                "language_code" : "en",
                "text" : "Turkman Gate"
             },
             "place_id" : "ChIJ_7LLvyb9DDkRMKKxP9YyXgs"
          },
          {
             "containment" : "OUTSKIRTS",
             "display_name" : {
                "language_code" : "en",
                "text" : "Chandni Chowk"
             },
             "place_id" : "ChIJWcXciBr9DDkRUb4dCDykTwI"
          },
          {
             "containment" : "NEAR",
             "display_name" : {
                "language_code" : "en",
                "text" : "Katar Ganj"
             },
             "place_id" : "ChIJH3cWUyH9DDkRaw-9CjvcRvY"
          }
       ],
       "landmarks" : [
          {
             "display_name" : {
                "language_code" : "en",
                "text" : "Delite Cinema"
             },
             "straight_line_distance_meters" : 29.9306755065918,
             "place_id" : "ChIJLfiYDCT9DDkROoEa7NdupUM",
             "travel_distance_meters" : 418.7794799804688,
             "spatial_relationship" : "ACROSS_THE_ROAD",
             "types" : [ "establishment", "movie_theater", "point_of_interest" ]
          },
          {
             "display_name" : {
                "language_code" : "en",
                "text" : "YES Bank"
             },
             "straight_line_distance_meters" : 66.83731079101562,
             "place_id" : "ChIJFYHM3yb9DDkRRKGkZl2mpSQ",
             "travel_distance_meters" : 489.0340270996094,
             "spatial_relationship" : "DOWN_THE_ROAD",
             "types" : [ "bank", "establishment", "finance", "point_of_interest" ]
          },
          {
             "display_name" : {
                "language_code" : "en",
                "text" : "UCO Bank"
             },
             "straight_line_distance_meters" : 25.38849639892578,
             "place_id" : "ChIJ-c6_wCb9DDkRjIk1LeqRtGM",
             "travel_distance_meters" : 403.2246398925781,
             "spatial_relationship" : "ACROSS_THE_ROAD",
             "types" : [ "atm", "bank", "establishment", "finance", "point_of_interest" ]
          },
          {
             "display_name" : {
                "language_code" : "en",
                "text" : "Delhi By Cycle Meeting Point"
             },
             "straight_line_distance_meters" : 44.02867126464844,
             "place_id" : "ChIJNxVfkSb9DDkRJD22l-eGFdM",
             "travel_distance_meters" : 97.41281890869141,
             "spatial_relationship" : "AROUND_THE_CORNER",
             "types" : [
                "establishment",
                "point_of_interest",
                "tourist_attraction",
                "travel_agency"
             ]
          },
          {
             "display_name" : {
                "language_code" : "en",
                "text" : "Axis Bank Branch"
             },
             "straight_line_distance_meters" : 102.3495178222656,
             "place_id" : "ChIJr3uaDCT9DDkR8roHTVSn1x4",
             "travel_distance_meters" : 330.8566284179688,
             "spatial_relationship" : "DOWN_THE_ROAD",
             "types" : [ "bank", "establishment", "finance", "point_of_interest" ]
          }
       ]
    }
  }

W każdym obiekcie address_descriptor znajdują się 2 tablice: landmarks i areas. Tablica landmarks zawiera maksymalnie 5 wyników uporządkowanych według trafności, która jest określana na podstawie bliskości żądanych współrzędnych, częstości występowania punktu orientacyjnego i jego widoczności. Każdy wynik dotyczący punktu orientacyjnego zawiera te wartości:

  • place_id to identyfikator miejsca wyniku dotyczącego punktów orientacyjnych. Zobacz omówienie identyfikatorów miejsc.
  • display_name to wyświetlana nazwa punktu orientacyjnego, która zawiera language_code i text.
  • straight_line_distance_meters to odległość w metrach między współrzędnymi wejściowymi a wynikiem dotyczącym punktów orientacyjnych.
  • travel_distance_meters to odległość w metrach między współrzędnymi wejściowymi a wynikiem dotyczącym punktów orientacyjnych, mierzona wzdłuż sieci dróg (z pominięciem ograniczeń drogowych).
  • spatial_relationship to szacowana zależność między współrzędną wejściową a wynikiem punktów orientacyjnych:
    • "NEAR" to domyślna relacja, gdy nie ma zastosowania żadna z poniższych opcji.
    • "WITHIN", gdy współrzędna wejściowa znajduje się w granicach struktury powiązanej z punktem orientacyjnym.
    • "BESIDE", gdy współrzędna wejściowa znajduje się bezpośrednio obok punktu orientacyjnego lub punktu dostępu do niego.
    • "ACROSS_THE_ROAD", gdy współrzędna wejściowa znajduje się bezpośrednio naprzeciwko punktu orientacyjnego po drugiej stronie trasy.
    • "DOWN_THE_ROAD", gdy współrzędna wejściowa znajduje się na tej samej trasie co punkt orientacyjny, ale nie "BESIDES" ani "ACROSS_THE_ROAD".
    • "AROUND_THE_CORNER", gdy współrzędna wejściowa znajduje się na trasie prostopadłej do punktu orientacyjnego (ograniczonej do jednego skrętu).
    • "BEHIND", gdy współrzędne wejściowe są blisko punktu orientacyjnego, ale daleko od jego punktu dostępu.
  • types to typy miejsc, do których należy dany punkt orientacyjny.

Obiekt areas zawiera maksymalnie 3 odpowiedzi i ogranicza się do miejsc, które reprezentują małe regiony, takie jak dzielnice, mniejsze miejscowości i duże kompleksy. Obszary zawierające żądaną współrzędną są wymienione jako pierwsze i uporządkowane od najmniejszego do największego. Każdy wynik areas zawiera te wartości:

  • place_id to identyfikator miejsca wyniku obszarów. Zobacz omówienie identyfikatorów miejsc.
  • display_name to wyświetlana nazwa obszaru, który zawiera language_code i text.
  • containment to szacowana relacja zawierania między współrzędnymi wejściowymi a wynikiem dotyczącym obszarów:
    • "NEAR" to domyślna relacja, gdy nie ma zastosowania żadna z poniższych opcji.
    • "WITHIN", gdy współrzędna wejściowa znajduje się blisko środka obszaru.
    • "OUTSKIRTS", gdy współrzędna wejściowa znajduje się blisko krawędzi obszaru.

Zasięg deskryptorów adresu

Deskryptory adresów są ogólnie dostępne w Indiach. Korzystanie z opisów adresów w Indiach nie wiąże się z żadnymi dodatkowymi kosztami, a użycie jest objęte istniejącym kodem SKU Geocoding (India) Essentials.

Prześlij opinię

Ta funkcja jest dostępna we wszystkich regionach. Jest ona ogólnie dostępna w Indiach, a we wszystkich innych regionach jest na etapie eksperymentalnym przed GA. Chętnie poznamy Twoją opinię:

Odwrotne geokodowanie (wyszukiwanie adresu)

Termin geokodowanie ogólnie odnosi się do przekształcania adresu zrozumiałego dla człowieka na lokalizację na mapie. Proces odwrotny, czyli przekształcanie lokalizacji na mapie w adres zrozumiały dla człowieka, nazywa się odwrotnym geokodowaniem.

Zamiast podawać tekstową wartość address, podaj w parametrze location parę szerokość/długość geograficzna rozdzieloną przecinkiem.

W tym przykładzie geokodowana jest wartość szerokości/długości geograficznej, a mapa jest wyśrodkowana na tej lokalizacji, co powoduje wyświetlenie okna informacyjnego ze sformatowanym adresem. Kliknij dowolne miejsce na mapie, aby dodać kod geograficzny lokalizacji, lub wpisz własne współrzędne.

TypeScript

let marker: google.maps.marker.AdvancedMarkerElement;

async function init() {
    //  Request the needed libraries.
    const [{ InfoWindow }, { Geocoder }, { AdvancedMarkerElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('geocoding'),
            google.maps.importLibrary('marker'),
        ]);

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the latlng input box.
    const latLngQuery = document.getElementById('latlng') as HTMLInputElement;

    // Get the submit button.
    const submitButton = document.getElementById('submit')!;

    // Set the cursor to crosshair.
    innerMap.setOptions({
        draggableCursor: 'crosshair',
        zoom: 13,
        mapTypeControl: false,
    });

    // Create a marker for re-use.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    marker.anchorTop = '40px';

    const geocoder = new Geocoder();
    const infoWindow = new InfoWindow();

    // Add a click event listener to the submit button.
    submitButton.addEventListener('click', () => {
        void geocodeLatLng(geocoder, innerMap, infoWindow);
    });

    // Add a click event listener to the map.
    innerMap.addListener('click', (event: google.maps.MapMouseEvent) => {
        if (event.latLng) {
            latLngQuery.value = `${event.latLng.lat()}, ${event.latLng.lng()}`;
            void geocodeLatLng(geocoder, innerMap, infoWindow);
        }
    });

    // Make an initial request upon loading.
    void geocodeLatLng(geocoder, innerMap, infoWindow);
}

async function geocodeLatLng(
    geocoder: google.maps.Geocoder,
    map: google.maps.Map,
    infoWindow: google.maps.InfoWindow
) {
    const input = (document.getElementById('latlng') as HTMLInputElement).value;
    const latlngStr = input.split(',', 2);
    const latlng = {
        lat: parseFloat(latlngStr[0]),
        lng: parseFloat(latlngStr[1]),
    };

    try {
        const { results } = await geocoder.geocode({ location: latlng });

        if (results[0]) {
            marker.position = latlng;
            map.setCenter(latlng);
            infoWindow.setContent(results[0].formatted_address);
            infoWindow.open(map, marker);
        } else {
            window.alert('No results found');
        }
    } catch (e) {
        window.alert('Geocoder failed due to: ' + String(e));
    }
}

void init();

JavaScript

let marker;

async function init() {
    //  Request the needed libraries.
    const [{ InfoWindow }, { Geocoder }, { AdvancedMarkerElement }] =
        await Promise.all([
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('geocoding'),
            google.maps.importLibrary('marker'),
        ]);

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the latlng input box.
    const latLngQuery = document.getElementById('latlng');

    // Get the submit button.
    const submitButton = document.getElementById('submit');

    // Set the cursor to crosshair.
    innerMap.setOptions({
        draggableCursor: 'crosshair',
        zoom: 13,
        mapTypeControl: false,
    });

    // Create a marker for re-use.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    marker.anchorTop = '40px';

    const geocoder = new Geocoder();
    const infoWindow = new InfoWindow();

    // Add a click event listener to the submit button.
    submitButton.addEventListener('click', () => {
        void geocodeLatLng(geocoder, innerMap, infoWindow);
    });

    // Add a click event listener to the map.
    innerMap.addListener('click', (event) => {
        if (event.latLng) {
            latLngQuery.value = `${event.latLng.lat()}, ${event.latLng.lng()}`;
            void geocodeLatLng(geocoder, innerMap, infoWindow);
        }
    });

    // Make an initial request upon loading.
    void geocodeLatLng(geocoder, innerMap, infoWindow);
}

async function geocodeLatLng(geocoder, map, infoWindow) {
    const input = document.getElementById('latlng').value;
    const latlngStr = input.split(',', 2);
    const latlng = {
        lat: parseFloat(latlngStr[0]),
        lng: parseFloat(latlngStr[1]),
    };

    try {
        const { results } = await geocoder.geocode({ location: latlng });

        if (results[0]) {
            marker.position = latlng;
            map.setCenter(latlng);
            infoWindow.setContent(results[0].formatted_address);
            infoWindow.open(map, marker);
        } else {
            window.alert('No results found');
        }
    } catch (e) {
        window.alert('Geocoder failed due to: ' + String(e));
    }
}

void init();

CSS

/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
gmp-map {
    height: 100%;
}

/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
}

#floating-panel {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 10px;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
}

#latlng {
    width: 100%;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
    margin-bottom: 4px;
}

#submit {
    font-size: 1rem;
}

HTML

<html>
    <head>
        <title>Reverse Geocoding</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="0.714224, -73.961452" zoom="8" map-id="DEMO_MAP_ID">
            <div id="floating-panel" slot="control-block-start-inline-start">
                <p>
                    Click the map to reverse geocode, or add your own
                    coordinates.
                </p>
                <input
                    id="latlng"
                    type="text"
                    value="40.714224, -73.961452" /><br />
                <input id="submit" type="button" value="Reverse Geocode" />
            </div>
        </gmp-map>
    </body>
</html>
Zobacz przykład

Zauważ, że w poprzednim przykładzie wyświetliliśmy pierwszy wynik, wybierając results[0]. Odwrotny geokoder często zwraca więcej niż 1 wynik. Adresy geokodowane to nie tylko adresy pocztowe, ale też dowolny sposób geograficznego określenia lokalizacji. Na przykład podczas geokodowania punktu w Chicago może on zostać oznaczony jako adres, miasto (Chicago), stan (Illinois) lub kraj (Stany Zjednoczone). Wszystkie są adresami dla geokodera. Usługa odwrotnego geokodowania zwraca wszystkie te wyniki.

Odwrotne geokodowanie dopasowuje jednostki polityczne (kraje, prowincje, miasta i dzielnice), adresy i kody pocztowe.

Oto przykład listy adresów, które może zwrócić powyższe zapytanie: 

results[0].formatted_address: "277 Bedford Ave, Brooklyn, NY 11211, USA"
results[1].formatted_address: "Grand St/Bedford Av, Brooklyn, NY 11211, USA"
results[2].formatted_address: "Williamsburg, Brooklyn, NY, USA"
results[3].formatted_address: "Brooklyn, NY, USA"
results[4].formatted_address: "New York, NY, USA"
results[5].formatted_address: "Brooklyn, NY 11211, USA"
results[6].formatted_address: "Kings County, NY, USA"
results[7].formatted_address: "New York-Northern New Jersey-Long Island, NY-NJ-PA, USA"
results[8].formatted_address: "New York Metropolitan Area, USA"
results[9].formatted_address: "New York, USA"

Adresy są zwracane w kolejności od najlepszego do najgorszego dopasowania. Zazwyczaj najbardziej widocznym wynikiem jest dokładniejszy adres, tak jak w tym przypadku. Pamiętaj, że zwracamy różne typy adresów, od najbardziej szczegółowego adresu ulicy po mniej szczegółowe jednostki administracyjne, takie jak dzielnice, miasta, hrabstwa, stany itp. Jeśli chcesz dopasować bardziej ogólny adres, możesz sprawdzić pole results[].types.

Uwaga: odwrotne geokodowanie nie jest nauką ścisłą. Geokoder spróbuje znaleźć najbliższą lokalizację z adresem w ramach określonej tolerancji.

Pobieranie adresu dla identyfikatora miejsca

Podaj placeId, aby znaleźć adres dla danego identyfikatora miejsca. Identyfikator miejsca to unikalny identyfikator, którego można używać z innymi interfejsami API Google. Możesz na przykład podać wartość placeId zwróconą przez Roads API, aby uzyskać adres przyciągniętego punktu. Więcej informacji o identyfikatorach miejsc znajdziesz w omówieniu identyfikatorów miejsc.

Jeśli podasz placeId, żądanie nie może zawierać żadnego z tych pól:

  • address
  • latLng
  • location
  • componentRestrictions

W poniższym przykładzie podano identyfikator miejsca, znaleziono odpowiadający mu adres i wyśrodkowano mapę na tej lokalizacji. Wyświetla też okno informacyjne ze sformatowanym adresem odpowiedniego miejsca:

TypeScript

// Initialize the map.
async function init(): Promise<void> {
    const [{ Geocoder }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('geocoding'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;
    const geocoder = new Geocoder();
    const infoWindow = new InfoWindow();

    document.getElementById('submit')!.addEventListener('click', () => {
        void geocodePlaceId(geocoder, innerMap, infoWindow);
    });
}

// This function is called when the user clicks the UI button.
async function geocodePlaceId(
    geocoder: google.maps.Geocoder,
    map: google.maps.Map,
    infoWindow: google.maps.InfoWindow
) {
    const placeId = (document.getElementById('place-id') as HTMLInputElement)
        .value;

    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

    const { results } = await geocoder.geocode({ placeId });
    if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);

        const marker = new AdvancedMarkerElement({
            map,
            position: results[0].geometry.location,
        });

        infoWindow.setContent(results[0].formatted_address);
        infoWindow.open(map, marker);
    } else {
        window.alert('No results found');
    }
}

void init();

JavaScript

// Initialize the map.
async function init() {
    const [{ Geocoder }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('geocoding'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;
    const geocoder = new Geocoder();
    const infoWindow = new InfoWindow();

    document.getElementById('submit').addEventListener('click', () => {
        void geocodePlaceId(geocoder, innerMap, infoWindow);
    });
}

// This function is called when the user clicks the UI button.
async function geocodePlaceId(geocoder, map, infoWindow) {
    const placeId = document.getElementById('place-id').value;

    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

    const { results } = await geocoder.geocode({ placeId });
    if (results[0]) {
        map.setZoom(11);
        map.setCenter(results[0].geometry.location);

        const marker = new AdvancedMarkerElement({
            map,
            position: results[0].geometry.location,
        });

        infoWindow.setContent(results[0].formatted_address);
        infoWindow.open(map, marker);
    } else {
        window.alert('No results found');
    }
}

void init();
Zobacz przykład