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

เลือกแพลตฟอร์ม: 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 }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        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,
    });
}

JavaScript

async function getPlaceDetails() {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        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,
    });
}
โปรดทราบว่าระบบได้ประกาศ Map และ Place ไว้ก่อนฟังก์ชันนี้แล้ว 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 ดูตัวอย่างฉบับเต็ม