Elemen Place Details

Pilih platform: Android iOS JavaScript

Elemen Detail Tempat dan Elemen Ringkas Detail Tempat adalah elemen HTML yang merender detail untuk suatu tempat:

• PlaceDetailsElement mendukung semua data Tempat yang dapat divisualisasikan, dan dapat menyertakan beberapa foto.
• PlaceDetailsCompactElement dirancang untuk menggunakan ruang minimal dan menampilkan serangkaian informasi ringkas tentang suatu tempat, termasuk nama, alamat, rating, dll. Tempat ini juga dapat menyertakan satu foto.

Elemen Place Details

Klik penanda di peta untuk melihat detail tempatnya di Elemen Detail Tempat.

PlaceDetailsElement mendukung berbagai elemen konten, termasuk jam buka lengkap, situs, nomor telepon, ringkasan editorial, sorotan khusus jenis, ulasan, kode plus, dan daftar fitur.

Untuk menampilkan detail tempat di peta, tambahkan elemen gmp-place-details ke elemen gmp-map di halaman HTML. Sertakan elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Ini bisa berupa objek Place, ID tempat, atau nama resource Tempat:

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Tips: Anda dapat menemukan ID tempat dari tempat tertentu menggunakan pencari ID tempat.

Mengonfigurasi konten

Anda dapat mengontrol konten tempat tertentu yang ditampilkan oleh elemen gmp-place-details menggunakan elemen gmp-place-content-config bertingkat untuk memilih dan mengonfigurasi detail tempat, seperti yang ditunjukkan dalam contoh ini:

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-content-config>
        <gmp-place-address></gmp-place-address>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-opening-hours></gmp-place-opening-hours>
        <gmp-place-website></gmp-place-website>
        <gmp-place-phone-number></gmp-place-phone-number>
        <gmp-place-summary></gmp-place-summary>
        <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
        <gmp-place-reviews></gmp-place-reviews>
        <gmp-place-feature-list></gmp-place-feature-list>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Elemen gmp-place-content-config itu sendiri berisi sejumlah elemen konten turunan, dan masing-masing memilih detail tempat yang sesuai untuk ditampilkan: PlaceAddressElement memilih alamat tempat, PlacePriceElement memilih tingkat harga tempat, dll. Urutan elemen turunan tidak relevan, karena detail yang dipilih selalu dirender dalam urutan tetap yang telah ditentukan sebelumnya.

Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut khusus konten:

• Elemen gmp-place-media digunakan untuk menampilkan satu foto, dan menyertakan atribut lightbox-preferred yang membuka foto dalam lightbox saat diklik. Lightbox dinonaktifkan secara default.
• Elemen gmp-place-attribution digunakan untuk menampilkan sumber foto. Atribut light-scheme-color dan dark-scheme-color digunakan untuk menetapkan warna teks atribusi dalam mode terang dan gelap.

Lihat dokumentasi referensi PlaceContentConfigElement untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

Agar lebih sederhana, elemen gmp-place-content-config dapat diganti dengan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Place Details, atau dengan gmp-place-standard-content untuk menampilkan konfigurasi standar.

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-place-details adalah 250 px-400 px. Lebar kurang dari 250 piksel mungkin tidak ditampilkan dengan benar. Tetapkan tinggi agar sesuai dengan aplikasi Anda. Elemen Place Details dirancang untuk men-scroll dalam ruang yang dialokasikan sesuai kebutuhan.

Elemen gmp-place-details juga mendukung berbagai properti CSS kustom untuk mengonfigurasi warna dan font elemen. Lihat Penyesuaian Gaya Kit UI Places untuk mengetahui detail selengkapnya.

Penting: Saat melakukan modifikasi visual, Anda harus mematuhi Persyaratan atribusi.

Lihat contoh kode lengkap

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
const marker = document.querySelector('gmp-advanced-marker');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    await google.maps.importLibrary("places");
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place && placeDetails.place.location) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();
index.js

Catatan: JavaScript dikompilasi dari cuplikan TypeScript.

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%
}

h1 {
  font-size: 16px;
  text-align: center;
}

gmp-map {
  height: 500px;
}

gmp-place-details {
  border-radius: 0px;
  margin: 20px;
  width: 400px;
  height: 500px;
  margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  min-width: 400px;
  overflow-y: none;
  overflow-x: none;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
        <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <div class="widget-container" slot="control-inline-start-block-start">
      <gmp-place-details>
        <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content> 
      </gmp-place-details>
    </div>
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Elemen Ringkas Place Details

Klik penanda di peta untuk melihat detail tempatnya dalam Elemen Ringkas Detail Tempat.

PlaceDetailsCompactElement merender detail untuk tempat yang dipilih menggunakan ruang minimal. Hal ini dapat berguna di jendela info yang menandai tempat di peta, dalam pengalaman media sosial seperti membagikan lokasi dalam chat, sebagai saran untuk memilih lokasi Anda saat ini, atau dalam artikel media untuk merujuk tempat di Google Maps.PlaceDetailsCompactElement dapat menampilkan nama, alamat, rating, jenis, harga, ikon aksesibilitas, status buka, dan satu foto. Dapat ditampilkan secara horizontal atau vertikal, seperti yang dipilih oleh atribut orientation.

Dalam cuplikan berikut, gmp-place-details-compact di-nesting dalam elemen gmp-map, dengan orientation disetel ke horizontal. Atribut tambahan, truncation-preferred, memotong konten tertentu agar pas dalam satu baris, bukan menggabungkannya. Elemen gmp-place-details-compact berisi elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Ini bisa berupa objek Place, ID tempat, atau nama resource Place.

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-content-config>
        <gmp-place-media lightbox-preferred></gmp-place-media>
        <gmp-place-rating></gmp-place-rating>
        <gmp-place-type></gmp-place-type>
        <gmp-place-price></gmp-place-price>
        <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
        <gmp-place-open-now-status></gmp-place-open-now-status>
        <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
    </gmp-place-content-config>
  </gmp-place-details-compact>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Tips: Anda dapat menemukan ID tempat dari tempat tertentu menggunakan pencari ID tempat.

Mengonfigurasi konten

Anda dapat mengontrol konten tempat tertentu yang ditampilkan oleh elemen gmp-place-details-compact menggunakan elemen gmp-place-content-config bertingkat untuk memilih dan mengonfigurasi detail tempat. Elemen gmp-place-content-config itu sendiri berisi sejumlah elemen konten turunan, dan masing-masing memilih detail tempat yang sesuai untuk ditampilkan. Urutan elemen turunan tidak relevan, karena detail yang dipilih selalu dirender dalam urutan tetap yang telah ditentukan sebelumnya. Beberapa elemen ini dapat dikonfigurasi lebih lanjut menggunakan atribut khusus konten.

Lihat dokumentasi referensi PlaceContentConfigElement untuk mengetahui informasi selengkapnya tentang semua elemen konten yang didukung.

Agar lebih sederhana, elemen gmp-place-content-config dapat diganti dengan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Ringkas Detail Tempat, atau dengan gmp-place-standard-content untuk menampilkan konfigurasi standar.

Mengonfigurasi tampilan

Rentang lebar yang direkomendasikan untuk elemen gmp-place-details-compact dalam orientasi vertikal adalah 180 px-300 px. Lebar kurang dari 160 piksel mungkin tidak ditampilkan dengan benar. Jangan menetapkan tinggi tetap.

Rentang lebar yang direkomendasikan untuk elemen gmp-place-details-compact dalam orientasi horizontal adalah 180px-500px. Lebar kurang dari 160 piksel mungkin tidak ditampilkan dengan benar. Pada lebar kurang dari 350 piksel, gambar thumbnail tidak akan ditampilkan. Jangan menetapkan tinggi tetap.

Elemen gmp-place-details-compact juga mendukung berbagai properti CSS kustom untuk mengonfigurasi warna dan font elemen. Lihat Penyesuaian Gaya Kit UI Places untuk mengetahui detail selengkapnya.

Penting: Saat melakukan modifikasi visual, Anda harus mematuhi Persyaratan atribusi.

Lihat contoh kode lengkap

Contoh ini menunjukkan cara menambahkan PlaceDetailsCompactElement ke peta secara terprogram menggunakan AdvancedMarkerElement.

JavaScript

// Use querySelector to select elements for interaction.
const mapContainer = document.getElementById("map-container");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
let gMap;
let marker;
async function initMap() {
    const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
    marker = new AdvancedMarkerElement({ map: gMap });
    // Hide the map type control.
    gMap.setOptions({ mapTypeControl: false });
    // Set up map, marker, and infowindow once widget is loaded.
    placeDetails.style.visibility = 'visible';
    placeDetails.addEventListener('gmp-load', (event) => {
        console.log("placeDetails initialized!");
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    gMap.addListener("click", async (event) => {
        event.stop();
        // Fire when the user clicks on a POI.
        if (event.placeId) {
            console.log("clicked on POI");
            console.log(event.placeId);
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
        }
        ;
    });
    // Function to update map, marker, and infowindow based on place details
    const updateMapAndMarker = () => {
        console.log("function called");
        if (placeDetails.place && placeDetails.place.location) {
            marker.gMap = null;
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
            gMap.panTo(adjustedCenter);
            gMap.setZoom(16); // Set zoom after panning if needed
            marker.content = placeDetails;
            marker.position = placeDetails.place.location;
        }
        else {
            console.log("else");
        }
    };
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
    const newLat = latLng.lat() + latitudeOffset;
    return new google.maps.LatLng(newLat, latLng.lng());
}
initMap();
index.js

Catatan: JavaScript dikompilasi dari cuplikan TypeScript.

CSS

html,
body {
  display: flex;
  width: 100%;
  height: 400px;
  margin: 0;
}

h1 {
  font-size: 16px;
  text-align: center;
}

#map-container {
    box-sizing: border-box;
    width: 100%;
}
gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);
  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  transform: translate(0, calc(-20px));
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id = "map-container"></div>
    <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact>
    <script>
        (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
        key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8",
        v: "weekly"
        });
    </script>  
  </body>
</html>
index.html