Felder abrufen
Wenn Sie bereits ein Place
-Objekt oder eine Orts-ID haben, verwenden Sie die Methode Place.fetchFields()
, um Details zu diesem Ort abzurufen. Geben Sie eine durch Kommas getrennte Liste der Ortsdatenfelder an, die zurückgegeben werden sollen. Geben Sie Feldnamen in der Camel-Case-Schreibweise an. Verwenden Sie das Place
-Objekt, das zurückgegeben wird, um Daten für die angeforderten Felder zu erhalten.
Im folgenden Beispiel wird eine Orts-ID verwendet, um eine neue Place
-Instanz zu erstellen. Danach wird Place.fetchFields()
aufgerufen, um die Felder displayName
und formattedAddress
abzurufen. Der Karte wird eine Markierung hinzugefügt und einige Daten werden in der Console protokolliert.
TypeScript
async function getPlaceDetails() { const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
JavaScript
async function getPlaceDetails() { const { Place } = await google.maps.importLibrary("places"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
Map
und Place
wurden vor dieser Funktion deklariert:
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");
„Place Overview“-Komponente verwenden
In der Komponente „Ortsübersicht“ werden detaillierte Informationen zu Millionen von Unternehmen angezeigt, darunter Öffnungszeiten, Sternebewertungen und Fotos sowie Wegbeschreibungen und andere Aktionen in einer vorgefertigten Benutzeroberfläche in 5 Größen und Formaten. Sie ist Teil der erweiterten Komponentenbibliothek der Google Maps Platform, einer Reihe von Webkomponenten, mit denen Entwickler schneller bessere Karten und Standortfunktionen erstellen können.
Mit dem Konfigurator für die Ortsübersicht können Sie einbettbaren Code für eine benutzerdefinierte Ortsübersichtskomponente erstellen und dann exportieren, um ihn mit gängigen Frameworks wie React und Angular oder ohne Framework zu verwenden.