Ortsdetails (neu)
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Entwickler im Europäischen Wirtschaftsraum (EWR)
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");
Vollständiges Beispiel ansehen
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-22 (UTC).
[null,null,["Zuletzt aktualisiert: 2025-08-22 (UTC)."],[[["\u003cp\u003eYou can fetch detailed information about a place using its Place ID and the \u003ccode\u003ePlace.fetchFields()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eSpecify the desired place data fields (e.g., \u003ccode\u003edisplayName\u003c/code\u003e, \u003ccode\u003eformattedAddress\u003c/code\u003e) when calling \u003ccode\u003efetchFields()\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eAccess the fetched data through the returned \u003ccode\u003ePlace\u003c/code\u003e object.\u003c/p\u003e\n"],["\u003cp\u003eAlternatively, the Place Overview component offers a pre-built UI to display place details.\u003c/p\u003e\n"],["\u003cp\u003eConfigure and embed the Place Overview component using the provided configurator for seamless integration.\u003c/p\u003e\n"]]],[],null,["Select platform: [Android](/maps/documentation/places/android-sdk/details-place \"View this page for the Android platform docs.\") [iOS](/maps/documentation/places/ios-sdk/details-place \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/place-details \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/places/web-service/place-details \"View this page for the Web Service platform docs.\") \n**European Economic Area (EEA) developers** If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](/maps/comms/eea/faq).\n\nFetch fields\n\nIf you have an existing `Place` object or place ID, use the `Place.fetchFields()`\nmethod to get details about that place. Provide a comma-separated list of\n[place data fields](/maps/documentation/javascript/place-class-data-fields) to return;\nspecify field names in camel case. Use the returned `Place` object to get data for the\nrequested fields.\n\n\nThe following example uses a place ID to create a new `Place`, calls `Place.fetchFields()`\nrequesting the `displayName` and `formattedAddress` fields, adds a marker\nto the map, and logs some data to the console. \n\nTypeScript \n\n```typescript\nasync function getPlaceDetails() {\n const { Place } = await google.maps.importLibrary(\"places\") as google.maps.PlacesLibrary;\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n // Use place ID to create a new Place instance.\n const place = new Place({\n id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',\n requestedLanguage: 'en', // optional\n });\n\n // Call fetchFields, passing the desired data fields.\n await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });\n\n // Log the result\n console.log(place.displayName);\n console.log(place.formattedAddress);\n\n // Add an Advanced Marker\n const marker = new AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n}https://github.com/googlemaps-samples/js-api-samples/blob/29b1d5be457a450848aa288697792a57ab9e3754/dist/samples/place-class/docs/index.ts#L26-L48\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nasync function getPlaceDetails() {\n const { Place } = await google.maps.importLibrary(\"places\");\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n // Use place ID to create a new Place instance.\n const place = new Place({\n id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',\n requestedLanguage: 'en', // optional\n });\n // Call fetchFields, passing the desired data fields.\n await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });\n // Log the result\n console.log(place.displayName);\n console.log(place.formattedAddress);\n // Add an Advanced Marker\n const marker = new AdvancedMarkerElement({\n map,\n position: place.location,\n title: place.displayName,\n });\n}https://github.com/googlemaps-samples/js-api-samples/blob/29b1d5be457a450848aa288697792a57ab9e3754/dist/samples/place-class/docs/index.js#L22-L41\n```\nNote that `Map` and `Place` have been declared prior to this function: \n\n```javascript\nconst { Map } = await google.maps.importLibrary(\"maps\");\nconst { Place } = await google.maps.importLibrary(\"places\");\n```\n[See the complete example](/maps/documentation/javascript/examples/place-class)\n\nUse the Place Overview component\n\nThe Place Overview component displays detailed information about millions of businesses,\nincluding opening hours, star reviews, and photos, plus directions and other\nactions in a premade UI in 5 sizes and formats. It is part of the\n[Extended Component Library](https://github.com/googlemaps/extended-component-library),\nfrom Google Maps Platform, a set of web components that helps developers build better maps\nand location features faster.\n\nUse the [Place Overview configurator](https://configure.mapsplatform.google/place-overview)\nto create embeddable code for a custom Place Overview component, then export\nit to be used with popular frameworks like React and Angular or no framework at all."]]