Elemen Place Details

Elemen Place Details dan Elemen Place Details Compact 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 kumpulan informasi ringkas tentang suatu tempat, termasuk nama, alamat, rating, dll. Informasi ini juga dapat menyertakan satu foto.

Elemen Place Details

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 pada 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 dapat berupa objek Place, ID tempat, atau nama resource Place dalam format 'places/{place_id}':

<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 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 setiap elemen 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.

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.

Untuk memudahkan, 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 di-scroll dalam ruang yang dialokasikan sesuai kebutuhan.

Elemen gmp-place-details juga mendukung berbagai properti CSS kustom untuk mengonfigurasi warna dan font elemen. Lihat Gaya Kustom Kit UI Tempat 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: 400px;
}

gmp-place-details {
  border-radius: 0px;
  margin: 20px;
  width: 400px;
  height: 400px;
  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

PlaceDetailsCompactElement merender detail untuk tempat yang dipilih menggunakan ruang minimal. Hal ini mungkin 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 mereferensikan tempat di Google Maps.PlaceDetailsCompactElement dapat menampilkan nama, alamat, rating, jenis, harga, ikon aksesibilitas, status buka, dan satu foto. Atribut ini dapat ditampilkan secara horizontal atau vertikal, seperti yang dipilih oleh atribut orientation.

Dalam contoh berikut, gmp-place-details-compact disusun bertingkat dalam elemen gmp-map, dengan orientation disetel ke horizontal. Atribut tambahan, truncation-preferred, memotong konten tertentu agar sesuai dengan satu baris, bukan digabungkan. Elemen gmp-place-details-compact berisi elemen turunan, gmp-place-details-place-request, untuk memilih tempat. Ini dapat berupa objek Place, ID tempat, atau nama resource Place dalam format 'places/{place_id}':

<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 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. 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.

Untuk memudahkan, elemen gmp-place-content-config dapat diganti dengan gmp-place-all-content untuk menampilkan semua detail yang tersedia di elemen Place Details Compact, 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 180 px-500 px. Lebar kurang dari 160 piksel mungkin tidak ditampilkan dengan benar. Dengan 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 Gaya Kustom Kit UI Tempat untuk mengetahui detail selengkapnya.

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

Lihat contoh kode lengkap

JavaScript

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 and marker based on updated 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();

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%;
}
/* [START maps_ui_kit_place_details_compact_style] */
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));
}

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: "YOUR_API_KEY",
            v: "alpha"
          });
        </script>
      </body>
    </html>