إذا كان لديك كائن Place أو معرّف مكان حالي، استخدِم طريقة Place.fetchFields()
للحصول على تفاصيل حول هذا المكان. قدِّم قائمة مفصولة بفواصل لحقول بيانات الأماكن المطلوب عرضها، وحدِّد أسماء الحقول بتنسيق camel case. استخدِم الكائن Place الذي تم عرضه للحصول على بيانات الحقول المطلوبة.
يستخدم المثال التالي رقم تعريف مكان لإنشاء Place جديد، ويطلب Place.fetchFields() الحقلَين displayName وformattedAddress، ويضيف علامة إلى الخريطة، ويسجّل بعض البيانات في وحدة التحكّم.
TypeScript
asyncfunctiongetPlaceDetails(){const{Place}=awaitgoogle.maps.importLibrary("places")asgoogle.maps.PlacesLibrary;const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;// Use place ID to create a new Place instance.constplace=newPlace({id:'ChIJN5Nz71W3j4ARhx5bwpTQEGg',requestedLanguage:'en',// optional});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','formattedAddress','location']});// Log the resultconsole.log(place.displayName);console.log(place.formattedAddress);// Add an Advanced Markerconstmarker=newAdvancedMarkerElement({map,position:place.location,title:place.displayName,});}
asyncfunctiongetPlaceDetails(){const{Place}=awaitgoogle.maps.importLibrary("places");const{AdvancedMarkerElement}=awaitgoogle.maps.importLibrary("marker");// Use place ID to create a new Place instance.constplace=newPlace({id:'ChIJN5Nz71W3j4ARhx5bwpTQEGg',requestedLanguage:'en',// optional});// Call fetchFields, passing the desired data fields.awaitplace.fetchFields({fields:['displayName','formattedAddress','location']});// Log the resultconsole.log(place.displayName);console.log(place.formattedAddress);// Add an Advanced Markerconstmarker=newAdvancedMarkerElement({map,position:place.location,title:place.displayName,});}
تاريخ التعديل الأخير: 2025-08-22 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-08-22 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\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."]]