개요
장소 클래스는 장소 라이브러리, Maps JavaScript API를 사용하기 위한 더 간단한 API를 제공하며 프로미스와 같은 최신 사용 패턴을 지원합니다.
시작하기
API 키 가져오기 및 필수 API 사용 설정
장소 클래스 미리보기를 사용하려면 결제 계정이 있는 Cloud 프로젝트가 필요합니다. Maps JavaScript API와 Places API도 사용 설정해야 합니다. 이렇게 하려면 안내에 따라 하나 이상의 API 또는 SDK를 사용 설정하세요. 두 API 모두 Cloud 콘솔의 동일한 프로젝트에서 사용 설정해야 합니다.
API 키 가져오기장소 라이브러리 로드
장소 라이브러리에 포함된 기능을 사용하려면 먼저 Maps JavaScript API 스크립트 로드 URL의 libraries
매개변수를 사용하여 로드해야 합니다. 이 미리보기의 경우 v=beta
도 지정해야 합니다.
<script async src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap"> </script>
텍스트 쿼리로 장소 찾기
텍스트 쿼리로 장소를 찾으려면 findPlaceFromQuery
를 호출합니다. fields
매개변수를 사용하여 하나 이상의 장소 데이터 필드가 쉼표로 구분된 목록을 카멜 표기법으로 지정합니다. fields: ['*']
를 사용하여 장소의 모든 데이터를 반환합니다(테스트 전용이며 프로덕션 환경에서는 권장되지 않음).
아래의 예에는 async/await 패턴을 이용해 findPlaceFromQuery
를 호출하고 결과를 지도에 표시하는 방법이 나와 있습니다.
TypeScript
let map: google.maps.Map; let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: centerCoordinates, zoom: 14, // ... }); findPlace(); } async function findPlace() { const request = { query: 'Sports Page', fields: ['displayName', 'location'], locationBias: centerCoordinates, }; const { places } = await google.maps.places.Place.findPlaceFromQuery(request); if (places.length) { const place = places[0]; const location = place.location as google.maps.LatLng; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); map.setCenter(location); } else { console.log('No results'); } }
자바스크립트
let map; let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 }; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: centerCoordinates, zoom: 14, // ... }); findPlace(); } async function findPlace() { const request = { query: "Sports Page", fields: ["displayName", "location"], locationBias: centerCoordinates, }; const { places } = await google.maps.places.Place.findPlaceFromQuery(request); if (places.length) { const place = places[0]; const location = place.location; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); map.setCenter(location); } else { console.log("No results"); } }
전화번호로 장소 찾기
전화번호로 장소를 찾으려면 findPlaceFromPhoneNumber
를 호출합니다. 전화번호는 (앞에 더하기 기호 ('+')가 있고 그 뒤에 국가 코드, 전화번호 자체가 나오는) 국가 코드 포함 형식이어야 합니다. 자세한 내용은 E.164 ITU 권장사항을 참고하세요. fields
매개변수를 사용하여 하나 이상의 장소 데이터 필드가 쉼표로 구분된 목록을 카멜 표기법으로 지정합니다. fields: ['*']
를 사용하여 장소의 모든 데이터를 반환합니다(테스트 전용이며 프로덕션 환경에서는 권장되지 않음).
아래의 예에는 async/await 패턴을 이용해 findPlaceFromPhoneNumber
를 호출하고 결과를 지도에 표시하는 방법이 나와 있습니다.
TypeScript
async function findPlaceByPhone() { const request = { phoneNumber: '+1(206)787-5388', fields: ['displayName', 'location'], } const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request); if (places.length) { const place = places[0]; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); console.log(place.displayName); } else { console.log('No results'); } }
자바스크립트
async function findPlaceByPhone() { const request = { phoneNumber: "+1(206)787-5388", fields: ["displayName", "location"], }; const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber( request ); if (places.length) { const place = places[0]; const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: place.location, title: place.displayName, }); console.log(place.displayName); } else { console.log("No results"); } } window.initMap = initMap;
장소 세부정보 가져오기
이미 Place
객체 또는 장소 ID가 있으면 Place.fetchFields
를 호출하여 해당 장소에 대한 세부정보를 가져올 수 있습니다. fields
매개변수를 사용하여 하나 이상의 장소 데이터 필드가 쉼표로 구분된 목록을 카멜 표기법으로 지정합니다. fields: ['*']
를 사용하여 모든 데이터 필드를 반환합니다(테스트 전용이며 프로덕션 환경에서는 권장하지 않음).
TypeScript
async function getPlaceDetails() { // Use place ID to create a new Place instance. const place = new google.maps.places.Place({ id: 'ChIJN1t_tDeuEmsRUsoyG83frY4', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress'] }); // Show the result console.log(place.displayName); console.log(place.formattedAddress); }
자바스크립트
async function getPlaceDetails() { // Use place ID to create a new Place instance. const place = new google.maps.places.Place({ id: "ChIJN1t_tDeuEmsRUsoyG83frY4", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress"] }); // Show the result console.log(place.displayName); console.log(place.formattedAddress); }
장소 데이터 필드
장소 세부정보 결과에 해당하는 필드이며, 기본, 연락처, 분위기 등 세 결제 카테고리로 분류됩니다. 기본 필드의 경우 기본 요율로 청구되며 추가 요금이 발생하지 않습니다. 연락처 및 분위기 필드의 청구 요율은 더 높습니다.
자세한 내용은 가격표를 참고하세요. 저작자 표시(html_attributions
)는 요청 여부에 관계없이 모든 호출에서 항상 반환됩니다.
장소 클래스는 다음과 같은 필드를 지원합니다.
기본 데이터
필드 | 장소 클래스(v=베타 채널만 해당) |
---|---|
주소 구성요소 | addressComponents |
비즈니스 상태 | businessStatus |
형식이 지정된 주소 | adrFormatAddress |
위치 | location |
아이콘 | icon |
아이콘 마스크 기본 URI | svgIconMaskUri |
아이콘 배경 색상 | iconBackgroundColor |
이름 | displayName |
사진 | photos |
장소 ID | id |
Plus Code | plusCode |
유형 | types |
URL | websiteURI |
UTC 오프셋 | utcOffsetMinutes |
표시 영역 | viewport |
휠체어 이용가능 입구 | hasWheelchairAccessibleEntrance |
연락처 데이터 필드
필드 | 장소 클래스(v=베타 채널만 해당) |
---|---|
전화번호 | nationalPhoneNumber |
국제 전화번호 | internationalPhoneNumber |
영업시간 | openingHours |
웹사이트 | websiteURI |
분위기 데이터 필드
필드 | 장소 클래스(v=베타 채널만 해당) |
---|---|
매장 밖 수령 | hasCurbsidePickup |
배달 | hasDelivery |
매장 내 식사 | hasDineIn |
가격 수준 | priceLevel |
평점 | rating |
예약 가능 | isReservable |
리뷰 | reviews |
맥주 판매 | servesBeer |
아침 식사 메뉴 제공 | servesBreakfast |
브런치 메뉴 제공 | servesBrunch |
저녁 식사 메뉴 제공 | servesDinner |
점심 식사 메뉴 제공 | servesLunch |
채식 메뉴 제공 | servesVegetarianFood |
와인 판매 | servesWine |
테이크아웃 | hasTakeout |
총 사용자 평점 | userRatingsCount |