Place Details

Pilih platform: Android iOS JavaScript Layanan Web

Mengambil kolom

Jika sudah memiliki objek Place atau ID tempat, gunakan metode Place.fetchFields() untuk mendapatkan detail tentang tempat tersebut. Berikan daftar yang dipisahkan koma dari kolom data tempat yang akan ditampilkan; tentukan nama kolom dalam camel case. Gunakan objek Place yang ditampilkan untuk mendapatkan data kolom yang diminta.

Contoh berikut menggunakan ID tempat untuk membuat Place baru, memanggil Place.fetchFields() yang meminta kolom displayName dan formattedAddress, menambahkan penanda ke peta, dan mencatat beberapa data ke konsol.

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
Perhatikan bahwa Map dan Place telah dideklarasikan sebelum fungsi ini: 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 Lihat contoh lengkap

Menggunakan komponen Ringkasan Tempat

Komponen Ringkasan Tempat menampilkan informasi mendetail tentang jutaan bisnis, termasuk jam buka, ulasan bintang, dan foto, serta rute dan tindakan lainnya dalam UI siap pakai dalam 5 ukuran dan format. Library ini adalah bagian dari Library Komponen yang Diperluas, dari Google Maps Platform, yaitu sekumpulan komponen web yang membantu developer membuat peta dan fitur lokasi yang lebih baik dengan lebih cepat.

Gunakan konfigurator Ringkasan Tempat untuk membuat kode yang dapat disematkan untuk komponen Ringkasan Tempat kustom, lalu ekspor kode tersebut untuk digunakan dengan framework populer seperti React dan Angular atau tanpa framework sama sekali.