Yer Ayrıntıları Öğeleri

Platform seçin: Android iOS JavaScript

Yer Ayrıntıları Öğesi ve Yer Ayrıntıları Kompakt Öğesi, bir yerin ayrıntılarını oluşturmak için kullanılan HTML öğeleridir:

Yer Ayrıntıları Öğesi

Yer ayrıntılarını Yer Ayrıntıları Öğesi'nde görmek için haritadaki bir işaretçiyi tıklayın.

PlaceDetailsElement ; çalışma saatleri, web sitesi, telefon numarası, editoryal özet, türe özgü önemli noktalar, yorumlar, artı kodu ve özellik listeleri gibi çok çeşitli içerik öğelerini destekler.

Yer ayrıntılarını haritada göstermek için HTML sayfasındaki gmp-map öğesine bir gmp-place-details öğesi ekleyin. Yeri seçmek için bir alt öğe (gmp-place-details-place-request) ekleyin. Bu, bir yer nesnesi, bir yer kimliği veya "places/{place_id}" biçiminde bir yerin kaynak adı olabilir: 

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

İçeriği yapılandırma

Bu örnekte gösterildiği gibi, yer ayrıntılarını seçmek ve yapılandırmak için iç içe yerleştirilmiş bir gmp-place-content-config öğesi kullanarak gmp-place-details öğesi tarafından gösterilen belirli yer içeriğini kontrol edebilirsiniz: 

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

gmp-place-content-config öğesi, bir dizi alt içerik öğesi içerir ve her biri, görüntülenecek ilgili yer ayrıntısını seçer: PlaceAddressElement, yerin adresini seçer, PlacePriceElement, yerin fiyat düzeyini seçer vb. Seçilen ayrıntılar her zaman sabit bir önceden tanımlanmış sırada oluşturulduğundan alt öğelerin sırası önemli değildir.

Bu öğelerin bazıları, içeriğe özel özellikler kullanılarak daha fazla yapılandırılabilir:

  • gmp-place-media öğesi tek bir fotoğrafı göstermek için kullanılır ve tıklandığında fotoğrafı lightbox'ta açan bir lightbox-preferred özelliği içerir. Lightbox varsayılan olarak devre dışıdır.
  • Fotoğrafın kaynağını göstermek için gmp-place-attribution öğesi kullanılır. light-scheme-color ve dark-scheme-color özellikleri, açık ve koyu modda ilişkilendirme metninin rengini ayarlamak için kullanılır.
Desteklenen tüm içerik öğeleri hakkında daha fazla bilgi için PlaceContentConfigElement referans belgelerini inceleyin.

Basitlik için, Yer Ayrıntıları öğesinde bulunan tüm ayrıntıları göstermek üzere gmp-place-content-config öğesi gmp-place-all-content ile, standart bir yapılandırma görüntülemek için ise gmp-place-standard-content ile değiştirilebilir.

Görünümü yapılandırma

gmp-place-details öğesi için önerilen genişlik aralığı 250-400 pikseldir. Genişliği 250 pikselden az olan öğeler doğru şekilde görüntülenmeyebilir. Yüksekliği uygulamanıza uyacak şekilde ayarlayın. Yer Ayrıntıları öğesi, gerektiğinde ayrılan alan içinde kaydırılacak şekilde tasarlanmıştır.

gmp-place-details öğesi, öğenin renklerini ve yazı tiplerini yapılandırmak için çeşitli özel CSS özelliklerini de destekler. Daha fazla bilgi için Places UI Kit Custom Styling başlıklı makaleyi inceleyin.

Tam kod örneğini inceleyin

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

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

Yer Ayrıntıları Küçük Öğesi

Yer ayrıntılarını Yer Ayrıntıları Kompakt Öğesi'nde görmek için haritadaki bir işaretçiyi tıklayın.

PlaceDetailsCompactElement seçilen bir yerin ayrıntılarını en az yer kullanarak gösterir. Bu, haritada bir yeri vurgulayan bilgi penceresinde, sohbette konum paylaşma gibi bir sosyal medya deneyiminde, mevcut konumunuzu seçme önerisi olarak veya Google Haritalar'daki yere referans vermek için bir medya makalesinde yararlı olabilir.PlaceDetailsCompactElement; ad, adres, puan, tür, fiyat, erişilebilirlik simgesi, açık durumu ve tek bir fotoğraf gösterebilir. orientation özelliği tarafından seçildiği şekilde yatay veya dikey olarak gösterilebilir.

Aşağıdaki snippet'te gmp-place-details-compact, gmp-map öğesinin içine yerleştirilmiş ve orientation, horizontal olarak ayarlanmıştır. Ek bir özellik olan truncation-preferred, belirli içerikleri kaydırmak yerine tek satıra sığacak şekilde keser. gmp-place-details-compact öğesi, yeri seçmek için bir alt öğe (gmp-place-details-place-request) içerir. Bu, bir yer nesnesi, bir yer kimliği veya "places/{place_id}" biçiminde bir yerin kaynak adı olabilir: 

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

İçeriği yapılandırma

Yer ayrıntılarını seçip yapılandırmak için iç içe yerleştirilmiş bir gmp-place-content-config öğesi kullanarak gmp-place-details-compact öğesiyle gösterilen belirli yer içeriğini kontrol edebilirsiniz. gmp-place-content-config öğesinin kendisi bir dizi alt içerik öğesi içerir ve her biri görüntülenecek ilgili yer ayrıntısını seçer. Seçilen ayrıntılar her zaman sabit ve önceden tanımlanmış bir sırada oluşturulduğundan alt öğelerin sırası önemli değildir. Bu öğelerin bazıları, içeriğe özel özellikler kullanılarak daha ayrıntılı şekilde yapılandırılabilir.

Desteklenen tüm içerik öğeleri hakkında daha fazla bilgi için PlaceContentConfigElement referans belgelerine bakın.

Basitlik açısından, Yer Ayrıntıları Compact öğesinde bulunan tüm ayrıntıları göstermek için gmp-place-content-config öğesi gmp-place-all-content ile, standart bir yapılandırma görüntülemek için ise gmp-place-standard-content ile değiştirilebilir.

Görünümü yapılandırma

Dikey yöndeki gmp-place-details-compact öğesi için önerilen genişlik aralığı 180-300 pikseldir. 160 pikselden küçük genişlikler doğru şekilde görüntülenmeyebilir. Sabit bir yükseklik ayarlamayın.

Yatay yönlendirmede gmp-place-details-compact öğesi için önerilen genişlik aralığı 180-500 pikseldir. 160 pikselden küçük genişlikler doğru şekilde görüntülenmeyebilir. Genişlik 350 pikselden az olduğunda küçük resim gösterilmez. Sabit bir yükseklik ayarlamayın.

gmp-place-details-compact öğesi, öğenin renklerini ve yazı tiplerini yapılandırmak için çeşitli özel CSS özelliklerini de destekler. Daha fazla bilgi için Places UI Kit Custom Styling başlıklı makaleyi inceleyin.

Tam kod örneğini inceleyin

Bu örnekte, AdvancedMarkerElement kullanarak bir haritaya programatik olarak PlaceDetailsCompactElement ekleme işlemi gösterilmektedir.

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

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