Place-Klasse (Vorschau)

Übersicht

Die Place-Klasse bietet eine einfachere API zum Verwenden der Places Library in der Maps JavaScript API und unterstützt moderne Nutzungsmuster wie Promise-Objekte.

Erste Schritte

API-Schlüssel anfordern und die erforderlichen APIs aktivieren

Bevor Sie die Vorabversion der Place-Klasse verwenden können, benötigen Sie ein Cloud-Projekt mit einem Rechnungskonto. Außerdem müssen Sie die Maps JavaScript API und die Places API aktivieren. Gehen Sie dazu wie unter APIs oder SDKs aktivieren beschrieben vor. Beide APIs müssen in der Cloud Console im selben Projekt aktiviert werden.

API-Schlüssel anfordern

Places Library laden

Damit Sie die Funktionen der Places Library nutzen können, müssen Sie sie zuerst mithilfe des libraries-Parameters in der URL zum Laden des Skripts der Maps JavaScript API laden. Für diese Vorschau müssen Sie auch v=beta angeben.

<script async
  src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

Ort per Textanfrage suchen

Rufen Sie findPlaceFromQuery auf, um einen Ort per Textanfrage zu finden. Verwenden Sie den Parameter fields, um eine durch Kommas getrennte Liste eines oder mehrerer Ortsdatenfelder in der Camel-Case-Schreibweise anzugeben. Verwenden Sie fields: ['*'], um alle Daten für einen Ort zurückzugeben (nur für Testzwecke, nicht für Produktionsumgebungen empfohlen).

Im folgenden Beispiel wird ein Muster für das asynchrone Laden und Warten (async/await) verwendet, um findPlaceFromQuery aufzurufen und die Ergebnisse auf einer Karte anzuzeigen.

TypeScript

let map: google.maps.Map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: centerCoordinates,
        zoom: 14,
        // ...
    });

    findPlace();
}

async function findPlace() {
    const request = {
        query: 'Sports Page',
        fields: ['displayName', 'location'],
        locationBias: centerCoordinates,
    };

    const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

    if (places.length) {
        const place = places[0];
        const location = place.location as google.maps.LatLng;
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });

        map.setCenter(location);

    } else {
        console.log('No results');
    }
}
index.ts

JavaScript

let map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: centerCoordinates,
    zoom: 14,
    // ...
  });
  findPlace();
}

async function findPlace() {
  const request = {
    query: "Sports Page",
    fields: ["displayName", "location"],
    locationBias: centerCoordinates,
  };
  const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

  if (places.length) {
    const place = places[0];
    const location = place.location;
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    map.setCenter(location);
  } else {
    console.log("No results");
  }
}

index.js

Ort über eine Telefonnummer suchen

Rufen Sie findPlaceFromPhoneNumber auf, um einen Ort anhand der Telefonnummer zu finden. Telefonnummern müssen im internationalen Format angegeben werden (ein Pluszeichen „+“, gefolgt von der Ländervorwahl und dann der Telefonnummer selbst). Weitere Informationen finden Sie in der ITU-Empfehlung E.164. Verwenden Sie den Parameter fields, um eine durch Kommas getrennte Liste eines oder mehrerer Ortsdatenfelder in der Camel-Case-Schreibweise anzugeben. Verwenden Sie fields: ['*'], um alle Daten für einen Ort zurückzugeben (nur für Testzwecke, nicht für Produktionsumgebungen empfohlen).

Im folgenden Beispiel wird ein Muster für das asynchrone Laden und Warten (async/await) verwendet, um findPlaceFromPhoneNumber aufzurufen und die Ergebnisse auf einer Karte anzuzeigen.

TypeScript

async function findPlaceByPhone() {
    const request = {
        phoneNumber: '+1(206)787-5388',
        fields: ['displayName', 'location'],
    }

    const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request);

    if (places.length) {
        const place = places[0];
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });
        console.log(place.displayName);
    } else {
        console.log('No results');
    }
}
index.ts

JavaScript

async function findPlaceByPhone() {
  const request = {
    phoneNumber: "+1(206)787-5388",
    fields: ["displayName", "location"],
  };
  const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(
    request
  );

  if (places.length) {
    const place = places[0];
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    console.log(place.displayName);
  } else {
    console.log("No results");
  }
}

window.initMap = initMap;

index.js

Ortsdetails abrufen

Wenn Sie bereits ein Place-Objekt oder eine Orts-ID haben, können Sie Place.fetchFields aufrufen, um weitere Details zu diesem Ort zu erhalten. Verwenden Sie den Parameter fields, um eine durch Kommas getrennte Liste eines oder mehrerer Ortsdatenfelder in der Camel-Case-Schreibweise anzugeben. Verwenden Sie fields: ['*'], um alle Datenfelder zurückzugeben (nur für Testzwecke, nicht für Produktionsumgebungen empfohlen).

TypeScript

async function getPlaceDetails() {
    // Use place ID to create a new Place instance.
    const place = new google.maps.places.Place({
        id: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'formattedAddress'] });

    // Show the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}
index.ts

JavaScript

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({ fields: ["displayName", "formattedAddress"] });
  // Show the result
  console.log(place.displayName);
  console.log(place.formattedAddress);
}

index.js

Ortsdatenfelder

Die Felder entsprechen Place Details-Ergebnissen und sind in drei Abrechnungskategorien unterteilt: „Basic“, „Contact“ und „Atmosphere“. Für Felder der Kategorie „Basic“ gilt der Basispreis und es fallen keine zusätzlichen Kosten an. Für Felder der Kategorie „Contact“ und „Atmosphere“ werden höhere Kosten abgerechnet. Weitere Informationen finden Sie in der Preisübersicht. Zuordnungen (html_attributions) werden bei jedem Aufruf zurückgegeben, unabhängig davon, ob sie angefordert wurden.

Die Place-Klasse unterstützt die folgenden Felder:

Felder für „Basic Data“

Feld Place-Klasse (v = nur Betakanal)
Adresskomponente addressComponents
Status des Unternehmens businessStatus
Formatierte Adresse adrFormatAddress
Ort location
Symbol icon
Basis-URI für Symbolmaske svgIconMaskUri
Symbolhintergrundfarbe iconBackgroundColor
Name displayName
Foto photos
Orts-ID id
Plus Code plusCode
Typ types
URL websiteURI
Differenz zu UTC utcOffsetMinutes
Darstellungsbereich viewport
Rollstuhlgerechter Eingang hasWheelchairAccessibleEntrance

Felder für „Contact Data“

Feld Place-Klasse (v = nur Betakanal)
Telefonnummer nationalPhoneNumber
Internationale Telefonnummer internationalPhoneNumber
Öffnungszeiten openingHours
Website websiteURI

Felder für „Atmosphere Data“

Feld Place-Klasse (v = nur Betakanal)
Abholung vor dem Laden hasCurbsidePickup
Lieferservice hasDelivery
Speisen vor Ort hasDineIn
Preisniveau priceLevel
Bewertung rating
Reservierung möglich isReservable
Rezensionen reviews
Bier servesBeer
Frühstück servesBreakfast
Brunch servesBrunch
Abendessen servesDinner
Mittagessen servesLunch
Vegetarische Speisen servesVegetarianFood
Wein servesWine
Zum Mitnehmen hasTakeout
Nutzerbewertungen gesamt userRatingsCount