Geocoding API und Places API mit datengestützten Stilen verwenden

Sie können die Geocoding API oder Places API in der Maps JavaScript API verwenden, um nach Regionen zu suchen und weitere Informationen zu Orten zu erhalten, die vom Dienst für die Regionssuche zurückgegeben werden. Die Geocoding API und die Places API sind leistungsstarke, stabile Alternativen zum Abrufen von Orts-IDs. Falls Sie bereits Orts-IDs nutzen, können Sie sie ganz einfach mit datengestützten Stilen wiederverwenden.

So binden Sie die Geocoding API und Places API in Ihre Maps JavaScript API-Apps ein:

Geocoding API verwenden

Mit der Geocoding API können Sie Adressen in geografische Koordinaten umwandeln und umgekehrt. Die folgenden Anwendungsfälle lassen sich gut mit datengestützten Stilen kombinieren:

  • Geocoding verwenden, um den Darstellungsbereich für eine Region abzurufen
  • Filtern von Komponenten auf Ihren Geocoding-Aufruf anwenden, um die Orts-IDs für die Verwaltungsgebiete 1–4, den Ort oder die Postleitzahl abzurufen
  • Die umgekehrte Geocodierung verwenden, um Orts-IDs anhand von Breiten- und Längengraden zu ermitteln oder Orts-IDs für alle Komponenten an einem bestimmten Ort zurückzugeben

Darstellungsbereich für eine Region abrufen

Der „Geocoding“-Dienst kann eine Orts-ID als Darstellungsbereich zurückgeben, den Sie an die Funktion map.fitBounds() weitergeben können, um ein Begrenzungspolygon auf der Karte anzuzeigen. Im folgenden Beispiel wird mit dem „Geocoding“-Dienst ein Darstellungsbereich abgerufen und dann map.fitBounds() aufgerufen:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API and zoom to the resulting bounds.
function zoomToPolygon(placeid) {
    geocoder
        .geocode({ placeId: placeid })
        .then(({ results }) => {
            map.fitBounds(results[0].geometry.viewport, 155);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Umgekehrte Geocodierung verwenden

Mit der umgekehrten Geocodierung können Sie Orts-IDs finden. Im folgenden Beispiel für eine „Geocoding“-Dienstfunktion werden die Orts-IDs für alle Adresskomponenten an den angegebenen Breiten- und Längengraden zurückgegeben:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

// Call Geocoding API.
function getPlaceIds(latLng) {
    geocoder
        .geocode({ latLng })
        .then(({ results }) => {
            console.log('Geocoding result:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
        })
        .catch((e) => {
            console.log('Geocoder failed due to: ' + e)
        });
}

Hier der entsprechende Webdienstaufruf für die umgekehrte Geocodierung:

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930

So verwenden Sie die umgekehrte Geocodierung mit Komponentenfilter, um die Adresskomponenten für einen oder mehrere der folgenden Typen am angegebenen Ort abzurufen:

  • administrativeArea
  • country
  • locality
  • postalCode

In der nächsten Beispielfunktion wird der „Geocoding“-Dienst verwendet, um Komponenteneinschränkungen mit umgekehrter Geocodierung hinzuzufügen und alle Adresskomponenten am angegebenen Ort nur für den locality-Typ zu erhalten:

// Set up the geocoder.
geocoder = new google.maps.Geocoder();

...

function getPlaceIdWithRestrictions(latLng) {
    geocoder
        .geocode({ latLng,
            componentRestrictions: {
              country: "US",
              locality: "chicago",
            },
        })
        .then(({ results }) => {
            console.log('Geocoding result with restriction:');
            console.log(results[0]);
            console.log(results[0].place_id);
            console.log(results[0].address_components);
            console.log(results[0].address_components[1].types[0]);
            console.log(results[0].address_components[1].long_name);
        })
        .catch((e) => {
            console.log('getPlaceId Geocoder failed due to: ' + e)
        });
}

Hier der entsprechende Webdienstaufruf für die umgekehrte Geocodierung:

https://maps.googleapis.com/maps/api/geocode/json?key="YOUR_API_KEY"&latlng=41.864182,-87.676930&result_type=locality

„Place Autocomplete“ für die Suche nach Regionen verwenden

Mit dem „Place Autocomplete“-Widget können Nutzer bequem nach Regionen suchen. Wenn das „Place Autocomplete“-Widget nur Regionen zurückgeben soll, müssen Sie types auf (regions) setzen, wie im folgenden Snippet gezeigt:

// Set up the Autocomplete widget to return only region results.
const autocompleteOptions = {
  fields: ["place_id", "type"],
  strictBounds: false,
  types: ["(regions)"],
};

Ortsdetails für eine Region abrufen

Die Ortsdetails einer Region können sehr nützlich sein. Sie können z. B.

  • anhand der Ortsnamen nach den Orts-IDs der jeweiligen Begrenzungen suchen.
  • den Darstellungsbereich abrufen, um eine Begrenzung anzuzeigen.
  • den Featuretyp für die Begrenzung abrufen (z. B. locality).
  • die formatierte Adresse abrufen, die in den USA in „Ort, Staat, Land“ aufgelöst wird (z. B. „Ottumwa, IA, USA“).
  • andere nützliche Daten wie Fotos abrufen.

In diesem Beispiel wird der „Places“-Dienst verwendet, um die Orts-ID für den Bundesstaat Washington durch eine „findPlaceFromQuery“-Abfrage zu ermitteln:

const request = {
    query: 'Washington',
    fields: ['place_id'],
  };

function findPlaceId() {
    placesService
        .findPlaceFromQuery(request, function (results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                console.log(results[0]);
            }
        });
}

Hier der entsprechende Find Place-Webdienstaufruf:

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?fields=place_id&input=Washington&inputtype=textquery&key=YOUR_API_KEY

In den folgenden Beispielen wird eine „Places Details“-Anfrage vom Typ „Place Details“ zum Abrufen von place.geometry.viewport gestellt. Anschließend wird map.fitBounds() aufgerufen, um die Karte auf das ausgewählte Begrenzungspolygon zu zentrieren.

const request = {
  placeId: placeid,
  fields: [
    "name",
    "formatted_address",
    "geometry",
    "photos",
    "type",
  ],
};

placesService.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // Zoom to the boundary polygon.
    let viewport = place.geometry.viewport;
    map.fitBounds(viewport, 155);

    // Print some place details to the console.
    const types = place.types;
    console.log("Feature type: " + types[0]);
    console.log("Formatted address: " + formatted_address);
    }
  }
});