Yer Ayrıntıları Öğeleri

Yer Ayrıntıları Öğesi ve Yer Ayrıntıları Kompakt Öğesi, bir yerle ilgili ayrıntıları gösteren HTML öğeleridir:

Farklı özellik gruplarının bir Yer Ayrıntıları öğesinin görünümünü nasıl etkileyeceğini görselleştirmek ve HTML/CSS, Kotlin/XML ve Swift'teki koda erişmek için Özelleştirme aracını kullanın.

Yer Ayrıntıları Öğesi

Haritadaki bir işaretçiyi tıklayarak yer ayrıntılarını Yer Ayrıntıları öğesinde görebilirsiniz.

PlaceDetailsElement; tam çalışma saatleri, web sitesi, telefon numarası, yedek olarak editoryal özet içeren yapay zeka destekli özet, türe özgü öne çıkanlar, yorumlar, yapay zeka destekli yorum özeti, Plus Code ve özellik listeleri dahil olmak üzere ç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 Place nesnesi, yer kimliği veya bir yerin kaynak adı olabilir: 

<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

gmp-place-details öğesi tarafından gösterilen belirli yer içeriklerini, yer ayrıntılarını seçip yapılandırmak için alt öğeleri iç içe yerleştirerek kontrol edebilirsiniz. Bu örnekte gösterildiği gibi: 

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-name></gmp-place-name>
            <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-review-summary></gmp-place-review-summary>
            <gmp-place-reviews></gmp-place-reviews>
            <gmp-place-feature-list></gmp-place-feature-list>
        </gmp-place-details>

Her alt içerik öğesi, gösterilecek ilgili yer ayrıntısını seçer: gmp-place-address yerin adresini seçer, gmp-place-price yerin fiyat seviyesini seçer vb. gmp-place-summary ve gmp-place-review-summary öğeleri, sırasıyla yerin ve yorumlarının yapay zeka destekli özetini sağlar. Seçilen ayrıntılar her zaman önceden tanımlanmış sabit bir sırada oluşturulduğundan alt öğelerin sırası önemli değildir. Yalnızca eklediğiniz içerik öğeleri gösterilir. Bu nedenle, yerin adını göstermek için gmp-place-name öğesini ekleyin.

Bu öğelerden bazıları, içeriğe özgü özellikler kullanılarak daha ayrıntılı bir şekilde yapılandırılabilir:

  • gmp-place-media öğesi tek bir fotoğrafı görüntülemek için kullanılır ve tıklandığında fotoğrafı bir lightbox'ta açan bir lightbox-preferred özelliği içerir. Lightbox varsayılan olarak devre dışıdır.
  • gmp-place-attribution öğesi, fotoğrafın kaynağını göstermek için kullanılır. light-scheme-color ve dark-scheme-color özellikleri, açık ve koyu modda atıf metninin rengini ayarlamak için kullanılır.

Desteklenen tüm içerik öğeleri hakkında daha fazla bilgi için Konum Widget'ları İçerik Özelleştirme referans dokümanlarına bakın.

Kolaylık sağlamak için, Yer Ayrıntıları öğesinde bulunan tüm ayrıntıları göstermek üzere gmp-place-all-content, standart bir yapılandırmayı görüntülemek için ise gmp-place-standard-content kullanabilirsiniz. Bu öğelerin her ikisi de yerin adını içerir.

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

gmp-place-details öğesi için önerilen genişlik aralığı 250-400 pikseldir. 250 pikselden küçük genişlikler doğru şekilde görüntülenmeyebilir. Yüksekliği uygulamanıza uygun şekilde ayarlayın. Yer Ayrıntıları öğesi, ayrılan alan içinde gerektiği gibi 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 Özel Stil Oluşturma başlıklı makaleyi inceleyin.

Kod örneğinin tamamını 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');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        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?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && 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';
        }
    });
}

void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <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-review-summary></gmp-place-review-summary>
                        <gmp-place-reviews></gmp-place-reviews>
                        <gmp-place-feature-list></gmp-place-feature-list>
                    </gmp-place-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>

Yer Ayrıntıları Kompakt Öğesi

Haritadaki bir işaretçiyi tıklayarak yer ayrıntılarını Yer Ayrıntıları Kompakt Öğesi'nde görebilirsiniz.

PlaceDetailsCompactElement, seçilen bir yerle ilgili ayrıntıları minimum alan kullanarak gösterir. Bu, haritadaki bir yeri vurgulayan bilgi penceresinde, sohbette konum paylaşma gibi sosyal medya deneyimlerinde, mevcut konumunuzu seçme önerisi olarak veya Google Haritalar'daki yere referans vermek için bir medya makalesinde yararlı olabilir. PlaceDetailsCompactElement; görünen ad, adres, puan, tür, fiyat, erişilebilirlik simgesi, açık olma 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, orientation horizontal olarak ayarlanacak şekilde yapılandırılmıştır. Ek bir özellik olan truncation-preferred, belirli içerikleri kaydırmak yerine tek satıra sığacak şekilde kısaltır. gmp-place-details-compact öğesi, yeri seçmek için bir alt öğe olan gmp-place-details-place-request öğesini içerir. Bu, bir Place nesnesi, yer kimliği veya bir yerin kaynak adı olabilir. 

  <gmp-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

İçeriği yapılandırma

gmp-place-details-compact öğesi tarafından gösterilen belirli yer içeriklerini, yer ayrıntılarını seçip yapılandırmak için alt öğeleri iç içe yerleştirerek kontrol edebilirsiniz. Bu snippet'te gösterildiği gibi: 

<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-details-compact>

Her alt içerik öğesi, gösterilecek ilgili yer ayrıntısını seçer. Seçilen ayrıntılar her zaman önceden tanımlanmış sabit bir sırada oluşturulduğundan alt öğelerin sırası önemli değildir. Yalnızca eklediğiniz içerik öğeleri gösterilir. Bu nedenle, yerin adını göstermek için gmp-place-name öğesini ekleyin. Bu öğelerin bazıları, içeriğe özgü özellikler kullanılarak daha ayrıntılı bir şekilde yapılandırılabilir.

Desteklenen tüm içerik öğeleri hakkında daha fazla bilgi için Konum Widget'ları İçerik Özelleştirme referans dokümanlarına bakın.

Kolaylık sağlamak için, Yer Ayrıntıları Compact öğesinde bulunan tüm ayrıntıları göstermek üzere gmp-place-all-content, standart bir yapılandırmayı görüntülemek için ise gmp-place-standard-content öğesini de kullanabilirsiniz. Bu öğelerin her ikisi de yerin adını içerir.

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önde gmp-place-details-compact öğesi için önerilen genişlik aralığı 180 piksel - 500 pikseldir. 160 pikselden küçük genişlikler doğru şekilde görüntülenmeyebilir. 350 pikselden daha küçük genişliklerde 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 Özel Stil Oluşturma başlıklı makaleyi inceleyin.

Place Details Compact öğesi bir bilgi penceresine eklenirse özel stilin doğrudan gmp-place-details-compact öğesine uygulanması gerektiğini unutmayın. Bunun nedeni, bilgi penceresinin haritanın gölge DOM'unun bir parçası olmasıdır. Bu nedenle, harici CSS stilleri uygulanmaz. 

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

Tam kod örneğini inceleyin

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <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>
    </body>
</html>