장소 세부정보

플랫폼 선택: Android iOS JavaScript 웹 서비스

필드 가져오기

기존 Place 객체 또는 장소 ID가 있는 경우 Place.fetchFields() 메서드를 사용하여 해당 장소에 대한 세부정보를 가져옵니다. 반환할 장소 데이터 필드를 쉼표로 구분하여 입력합니다. 필드 이름은 카멜 표기법으로 지정합니다. 반환된 Place 객체를 사용하여 요청된 필드의 데이터를 가져옵니다.

다음 예에서는 장소 ID를 사용하여 새 Place를 만들고 displayName 및 formattedAddress 필드를 요청하는 Place.fetchFields()를 호출한 후 지도에 마커를 추가하고 일부 데이터를 콘솔에 로깅합니다.

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

자바스크립트

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,
  });
}

index.js
Map 및 Place는 이 함수 전에 선언되었습니다. 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 전체 예 보기

장소 개요 구성요소 사용

장소 개요 구성요소는 영업시간, 별표 리뷰, 사진, 경로, 기타 작업을 비롯하여 수백만 개의 비즈니스에 관한 세부정보를 사전 제작된 UI에 5가지 크기와 형식으로 표시합니다. 이 라이브러리는 개발자가 더 나은 지도 및 위치 기능을 더 빠르게 빌드하는 데 도움이 되는 웹 구성요소 모음인 Google Maps Platform의 확장 구성요소 라이브러리에 포함되어 있습니다.

장소 개요 구성 도구를 사용하여 맞춤 장소 개요 구성요소의 삽입 가능한 코드를 만든 후 React 및 Angular와 같은 인기 있는 프레임워크 또는 프레임워크 없이 사용할 수 있도록 내보냅니다.