Zur neuen Place Photos-Version migrieren

Entwickler im Europäischen Wirtschaftsraum (EWR)

Mit der Funktion „Place Photo“ können Sie qualitativ hochwertige Fotos auf Ihren Webseiten einbinden. Auf dieser Seite werden die Unterschiede zwischen den Funktionen für Ortsfotos in der Klasse Place (neu) und PlacesService (Legacy) erläutert. Außerdem finden Sie hier einige Code-Snippets zum Vergleich.

  • PlacesService (Legacy) gibt ein Array mit bis zu 10 PlacePhoto-Objekten als Teil des PlaceResult-Objekts für jede getDetails()-Anfrage zurück, wenn das Feld photos in der Anfrage angegeben ist. Bei textSearch() und nearbySearch() wird standardmäßig das erste Foto des Orts zurückgegeben, falls verfügbar.
  • Die Klasse Place gibt ein Array mit bis zu 10 Photo-Objekten als Teil einer fetchFields()-Anfrage zurück, wenn das Feld photos in der Anfrage angegeben ist.

In der folgenden Tabelle sind einige der wichtigsten Unterschiede bei der Verwendung von Ortsfotos zwischen der Klasse Place und PlacesService aufgeführt:

PlacesService (alt) Place (neu)
PlacePhoto-Schnittstelle Klasse Photo
PlacePhoto gibt html_attributions als String zurück. Photo gibt eine AuthorAttribution-Instanz zurück.
Für Methoden ist ein Callback erforderlich, um das Ergebnisobjekt und die google.maps.places.PlacesServiceStatus-Antwort zu verarbeiten. Verwendet Promises und funktioniert asynchron.
Methoden erfordern eine PlacesServiceStatus-Prüfung. Keine Statusprüfung erforderlich, Standardfehlerbehandlung kann verwendet werden. Weitere Informationen
PlacesService muss mit einer Karte oder einem div-Element instanziiert werden. Place kann überall dort instanziiert werden, wo es erforderlich ist, ohne dass ein Verweis auf eine Karte oder ein Seitenelement nötig ist.

Codevergleich

In diesem Abschnitt wird Code für Ortsfotos verglichen, um die Unterschiede zwischen dem Places Service und der Klasse „Place“ zu veranschaulichen. Die Code-Snippets zeigen den Code, der für die Anfrage von Fotos eines Ortes über die jeweilige API erforderlich ist.

Places Service (Legacy)

Im folgenden Snippet wird gezeigt, wie Fotos mit PlacesService zurückgegeben und das erste Fotoergebnis auf der Seite angezeigt wird. In diesem Beispiel werden in der „Place Details“-Anfrage eine Orts-ID sowie die Felder name und photos angegeben. Das erste Foto wird dann auf der Seite angezeigt, nachdem der Dienststatus geprüft wurde. Beim Instanziieren von PlacesService muss eine Karte oder ein div-Element angegeben werden. Da in diesem Beispiel keine Karte verwendet wird, wird ein div-Element verwendet.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Autorenangaben in PlacesService

PlacesService gibt die erforderlichen Autorenangaben als html_attributions-String zurück, der eine URL enthält, die auf die Google-Profilseite des Autors verweist. Im folgenden Snippet wird gezeigt, wie Sie die Quellenangabe für das erste Fotoergebnis abrufen.

let attributionUrl = place.photos[0].html_attributions;

Weitere Informationen

Place-Klasse (neu)

Im folgenden Snippet wird die Methode fetchFields() verwendet, um Ortsdetails wie den Anzeigenamen und Fotos des Orts zurückzugeben. Zuerst wird ein neues Place-Objekt mit einer Orts-ID instanziiert. Anschließend wird fetchFields() aufgerufen, wobei die Felder displayName und photos angegeben werden. Das erste Foto des Ortes wird dann auf der Seite angezeigt. Bei Verwendung der Klasse Place muss der Dienststatus nicht geprüft werden, da dies automatisch erfolgt.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

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

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Autorenangaben in der Klasse Place

Die Klasse Place gibt die Urheberangaben als AuthorAttribution-Instanz zurück, einschließlich des Namens des Autors, eines URI für die Google-Profilseite des Autors und eines URI für das Profilfoto des Autors. Das folgende Snippet zeigt, wie Sie die Urheberrechtsangaben für das erste Fotoergebnis abrufen.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Weitere Informationen