Gelişmiş Yer Ayrıntıları Öğeleri (önizleme)

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

Hem Gelişmiş Yer Ayrıntıları Öğesi hem de Gelişmiş Yer Ayrıntıları Kompakt Öğesi, işlem düğmelerini özelleştirme, yer adını atlama ve yorumları ve medyayı filtreleme gibi aynı ileri seviye özellikleri sunar.

Farklı özellik kümelerinin 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.

Gelişmiş Yer Ayrıntıları Öğesi (önizleme)

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

AdvancedPlaceDetailsElement, ç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-advanced-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-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

İçeriği yapılandırma

Aşağıdaki örnekte gösterildiği gibi, yer ayrıntılarını seçip yapılandırmak için alt öğeleri yerleştirerek gmp-advanced-place-details öğesi tarafından gösterilen belirli yer içeriğini kontrol edebilirsiniz: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/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-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

Her alt içerik öğesi, gösterilecek 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.
  • gmp-place-attribution öğesi, bir fotoğrafın veya yorumun kaynağı gibi kapsamlı Maps API veri ilişkilendirme yapılandırmalarını görüntülemek 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 Yer widget'ı içerik özelleştirme referans belgelerini inceleyin.

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

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

gmp-advanced-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. Gelişmiş Yer Ayrıntıları öğesi, gerektiğinde ayrılan alan içinde kaydırılacak şekilde tasarlanmıştır.

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

Gelişmiş Yer Ayrıntıları Kompakt Öğesi (önizleme)

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

AdvancedPlaceDetailsCompactElement seçilen bir yerle ilgili ayrıntıları minimum alan kullanarak oluşturur. 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. AdvancedPlaceDetailsCompactElement; 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-advanced-place-details-compact, orientation değeri horizontal olarak ayarlanmış şekilde yapılandırılır. Ek bir özellik olan truncation-preferred, belirli içerikleri kaydırmak yerine tek satıra sığacak şekilde keser. gmp-advanced-place-details-compact öğesi, yeri seçmek için bir alt öğe (gmp-place-details-place-request) içerir. Bu bir yer nesnesi, yer kimliği veya bir yerin kaynak adı olabilir. 

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

İçeriği yapılandırma

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

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-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 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 Yer widget'ı içerik özelleştirme referans belgelerini inceleyin.

Basitlik için, Gelişmiş Yer Ayrıntıları Compact öğesinde bulunan tüm ayrıntıları göstermek üzere gmp-place-all-content veya standart bir yapılandırma görüntülemek için gmp-place-standard-content kullanabilirsiniz.

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

Dikey yöndeki gmp-advanced-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-advanced-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-advanced-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.

Gelişmiş Yer Ayrıntıları Compact öğesi bir bilgi penceresine eklenirse özel stilin doğrudan gmp-advanced-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-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

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

Gelişmiş özellikler

İşlem düğmelerini özelleştirme

İşlem düğmelerini, Gelişmiş Yer Ayrıntıları bileşeninin doğrudan alt öğeleri olarak ekleyin. Standart gezinme bağlantıları için <gmp-place-link> özelliğini kullanın ve action özelliğini açıkça belirtin. İsteğe bağlı olarak slot özelliğini belirtebilirsiniz. Geçerli önceden tanımlanmış işlemler open-website, open-directions, open-map ve call'dir. slot özelliği atlanırsa varsayılan olarak action-main değeri kullanılır. 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

Görsel ilişkilendirme koşulları

Önemli: Özel işlem düğmesi, kullanıcı bilgilerini Google dışında bir üçüncü tarafla paylaştığında bunu son kullanıcılara açıkça belirtmeniz gerekir. Görsel ilişkilendirme koşullarını inceleyin.

Yer adını atlama

Yer adını atlamak için <gmp-place-name> öğesini özel içeriğinizden açıkça hariç tutun. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

Yorumları ve medyayı filtreleme

Bu kod örneğinde yalnızca "kahve" kelimesinin geçtiği medya ve yorumlar gösterilmektedir.

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

Ayrıca, searchMediaCount ve searchReviewsCount özelliklerini okuyarak belirli bir arama sorgusuyla eşleşen toplam öğe sayısını almak için JavaScript'i de kullanabilirsiniz. Bu mülklere erişmeden önce gmp-load etkinliğinin gerçekleşmesini beklemeniz gerekir. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});