รายละเอียดสถานที่

เลือกแพลตฟอร์ม: Android iOS JavaScript เว็บเซอร์วิส

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

หากคุณมีรหัสวัตถุหรือสถานที่ 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 ขนาดและ 5 รูปแบบ คอมโพเนนต์นี้เป็นส่วนหนึ่งของคลังคอมโพเนนต์แบบขยายจาก Google Maps Platform ซึ่งเป็นชุดคอมโพเนนต์เว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแผนที่และฟีเจอร์ตำแหน่งที่ดีขึ้นได้เร็วขึ้น

ใช้เครื่องมือกําหนดค่าภาพรวมสถานที่เพื่อสร้างโค้ดที่ฝังได้สําหรับคอมโพเนนต์ภาพรวมสถานที่ที่กําหนดเอง จากนั้นส่งออกเพื่อนำไปใช้กับเฟรมเวิร์กยอดนิยม เช่น React และ Angular หรือจะใช้โดยไม่ต้องใช้เฟรมเวิร์กเลยก็ได้