장소 세부정보 (신규)

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

유럽 경제 지역 (EEA) 개발자

객체 배치

장소에 관한 정보가 포함된 Place 객체는 텍스트 검색, 주변 지역 검색, Place Autocomplete에 의해 동적으로 반환됩니다. 장소 ID 또는 리소스 이름 (리소스 이름은 places/이 앞에 붙은 장소 ID임)에서 Place 객체를 만들 수도 있습니다. 다음 스니펫은 장소 ID를 사용하여 Place 객체를 만드는 방법을 보여줍니다.

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

장소 리소스 이름에서 Place 객체를 만들 수도 있습니다.

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

자세한 내용은 PlaceOptions를 참고하세요.

필드 가져오기

기존 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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}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: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });
    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });
    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });
    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);
    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }
    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}index.js

Map 및 Place은 이 함수 전에 선언되었습니다.

const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");

전체 예 보기