장소 클래스(미리보기)

개요

장소 클래스는 장소 라이브러리, 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');
    }
}index.ts

자바스크립트

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");
  }
}
index.js

전화번호로 장소 찾기

전화번호로 장소를 찾으려면 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');
    }
}index.ts

자바스크립트

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;
index.js

장소 세부정보 가져오기

이미 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);
}index.ts

자바스크립트

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);
}
index.js

장소 데이터 필드

장소 세부정보 결과에 해당하는 필드이며, 기본, 연락처, 분위기 등 세 결제 카테고리로 분류됩니다. 기본 필드의 경우 기본 요율로 청구되며 추가 요금이 발생하지 않습니다. 연락처 및 분위기 필드의 청구 요율은 더 높습니다. 자세한 내용은 가격표를 참고하세요. 저작자 표시(html_attributions)는 요청 여부에 관계없이 모든 호출에서 항상 반환됩니다.

주의: findPlaceFromQuery findPlaceFromPhoneNumber, fetchFields 요청은 동일한 필드를 반환하지 않습니다. findPlaceFromQuery 및 findPlaceFromPhoneNumber 요청은 fetchFields 요청에서 반환하는 필드의 하위 집합을 반환합니다. findPlaceFromQuery 또는 findPlaceFromPhoneNumber에서 원하는 필드를 반환하지 않는 경우 이중 하나를 사용하여 place_id를 가져온 다음 해당 장소 ID를 사용하여 fetchFields를 요청할 수 있습니다.

장소 클래스는 다음과 같은 필드를 지원합니다.

기본 데이터

필드	장소 클래스(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`