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ı bir 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ı, yapay zeka destekli özet (editoryal özetle yedekleme), türe özgü önemli noktalar, yorumlar, yapay zeka destekli yorum özeti, 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, yer nesnesi, yer kimliği veya 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

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

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

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: gmp-place-address yerin adresini, gmp-place-price yerin fiyat düzeyini vb. seçer. 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 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 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 belgelerine bakın.

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. 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, 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 (Places UI Kit'te Özel Stil Oluşturma) 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');
async function initMap() {
    // 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 && 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 =
                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';
        }
    });
}
initMap();
index.js

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;
}
style.css

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" defer></script>
        <!-- prettier-ignore -->
        <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>
    </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>
index.html

Örneği deneyin

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 yerle ilgili ayrıntıları en az yer kullanarak gösterir. Bu özellik, haritada bir yeri vurgulayan bilgi penceresinde, sohbet sırasında 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 faydalı olabilir. PlaceDetailsCompactElement, görünen 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, orientation değeri horizontal olarak ayarlanmış şekilde yapılandırılır. Ek bir özellik olan truncation-preferred, belirli içerikleri sarmalamak 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, yer 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

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-compact öğesi tarafından gösterilen belirli yer içeriğini kontrol edebilirsiniz. Bu snippet'te gösterildiği gibi: 

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

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. 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. Genişliği 160 pikselden az olan reklamlar doğru şekilde görüntülenmeyebilir. Sabit yükseklik ayarlamayın.

Yatay yönlendirmede gmp-place-details-compact öğesi için önerilen genişlik aralığı 180-500 pikseldir. Genişliği 160 pikselden az olan reklamlar doğru şekilde görüntülenmeyebilir. 350 pikselden daha küçük genişliklerde küçük resim gösterilmez. Sabit 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 (Places UI Kit'te Özel Stil Oluşturma) başlıklı makaleyi inceleyin.

Yer Ayrıntıları Kompakt öğ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>
index.html

Tam kod örneğini inceleyin

Bu örnekte, InfoWindow ve AdvancedMarkerElement kullanarak bir 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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
initMap();
index.js

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;
}
style.css

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" defer></script>
        <!-- prettier-ignore -->
        <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>
    </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>
index.html

Örneği deneyin