기존 Place 객체 또는 장소 ID가 있는 경우 Place.fetchFields() 메서드를 사용하여 해당 장소에 대한 세부정보를 가져옵니다. 반환할 장소 데이터 필드의 쉼표로 구분된 목록을 제공합니다. 필드 이름을 카멜 표기법으로 지정합니다. 반환된 Place 객체를 사용하여 요청된 필드의 데이터를 가져옵니다.
다음 예에서는 장소 ID를 사용하여 새 Place를 만들고 displayName 및 formattedAddress 필드를 요청하는 Place.fetchFields()를 호출하고, 지도에 마커를 추가하고, 일부 데이터를 콘솔에 로깅합니다.
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,});}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 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."]]