รายละเอียดสถานที่ (ใหม่)

เลือกแพลตฟอร์ม: Android iOS JavaScript เว็บเซอร์วิส
นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

วางออบเจ็กต์

ออบเจ็กต์ Place ซึ่งมีข้อมูลเกี่ยวกับสถานที่ จะแสดงแบบไดนามิก โดยการค้นหาข้อความ การค้นหาใกล้เคียง และการเติมข้อความอัตโนมัติของสถานที่ นอกจากนี้ คุณยังสร้างออบเจ็กต์ Place จากรหัสสถานที่หรือชื่อทรัพยากรได้ (ชื่อทรัพยากรคือรหัสสถานที่ที่มีคำนำหน้าเป็น places/) ข้อมูลโค้ดต่อไปนี้แสดงการสร้างออบเจ็กต์ 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 อยู่แล้ว หรือมีรหัสสถานที่หรือชื่อทรัพยากร ให้ใช้วิธี Place.fetchFields() เพื่อดูรายละเอียดเกี่ยวกับสถานที่นั้น ระบุรายการฟิลด์ข้อมูลสถานที่ที่คั่นด้วยคอมมา เพื่อส่งคืน โดยระบุชื่อฟิลด์ในรูปแบบ Camel Case ใช้ออบเจ็กต์ Place ที่แสดงผลเพื่อรับข้อมูล สำหรับช่องที่ขอ

ตัวอย่างต่อไปนี้ใช้รหัสสถานที่เพื่อสร้าง 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");
 ดูตัวอย่างฉบับสมบูรณ์