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

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

ดึงข้อมูลช่อง

หากมีออบเจ็กต์ 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: '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

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: '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 หรือไม่ใช้เฟรมเวิร์กเลยก็ได้