Place Details (最新)

選取平台： Android iOS JavaScript 網頁服務

歐洲經濟區 (EEA) 開發人員

放置物件

Text Search、Nearby Search 和 Place Autocomplete 會動態傳回 Place 物件，其中包含地點相關資訊。您也可以從地點 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，並呼叫 Place.fetchFields() 來要求 displayName 和 formattedAddress 欄位，然後在地圖上新增標記。

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

JavaScript

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");

查看完整範例