Haritalar temellendirme widget'ı

Bağlamsal widget, diğer Google Haritalar içeriklerini desteklemek veya tamamlamak için kullanılan bir görsel kapsayıcı olan Google Haritalar'ın GA öncesi teklifidir. Google Haritalar bağlamsal widget'ı, Google Haritalar ile temellendirmeyi uygulamalarınıza entegre ederek yapay zeka destekli, etkileşimli bir sohbet deneyimi oluşturmanıza olanak tanır. Bağlamsal widget, Vertex AI API yanıtında döndürülen ve görsel içerik oluşturmak için kullanılabilen bağlam jetonu googleMapsWidgetContextToken kullanılarak oluşturulur.

Bağlamsal widget, senaryonuza bağlı olarak farklı işlevler sunar:

  • Google Haritalar istemi, yanıt oluşturmak için kullanıldığında öznel kullanıcı tarafından oluşturulan içerikler (UGC) gösterilir.
  • Vertex AI yalnızca metin yanıtı oluşturduğunda sonuçları harita görselleştirmeleri ve verilerle zenginleştirmeye yardımcı olur.

İçeriğe dayalı widget'ın işleyiş şekli

Bağlamsal widget, Vertex AI'da Google Haritalar ile Temellendirme'den gelen bir yanıtı googleMapsWidgetContextToken şeklinde gösterir. Bağlamsal widget'ı oluşturmak ve yanıtı göstermek için bu jetonu kullanın. Daha fazla bilgi edinin. Etkinlik akışı şu şekildedir:

  1. Google Haritalar ile temellendirilmiş bir sorguyla Vertex AI API'yi çağırın.
  2. Vertex AI, googleMapsWidgetContextToken döndürür.
  3. Bağlamsal widget'ı jetonu kullanarak oluşturun.
  4. Bağlamsal widget, Vertex AI'ın yanıtını gösterir.

Aşağıdaki örnekte, Vertex AI API'den döndürüldüğünde bağlam jetonunun nasıl göründüğü gösterilmektedir.

"googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>...
Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",

Google Haritalar bağlamsal widget'ını oluşturun

Google Haritalar içerik widget'ını oluşturmak ve kullanmak için widget'ı gösteren sayfada Maps JavaScript API'nin alfa sürümünü kullanın. Daha fazla bilgi için Maps JavaScript API'yi yükleme başlıklı makaleyi inceleyin. Ayrıca, Google Maps JavaScript API'yi yüklemek için etkinleştirilen API anahtarını da kullanmanız gerekir. places kitaplığının yüklendiğini doğrulayın.

Aşağıdaki bölümde, Google Haritalar bağlamsal widget'ının nasıl oluşturulacağı açıklanmaktadır. Özel HTML veya JavaScript kullanarak bağlama dayalı bir widget oluşturun.

Özel HTML öğelerini kullanma

Aşağıdaki bölümde, özel HTML öğelerini kullanarak Google Haritalar bağlamsal widget'ının nasıl oluşturulacağı açıklanmaktadır. Sayfaya gmp-place-contextual öğesini ekleyerek bağlamsal bir widget oluşturun.

  1. Sayfaya gmp-place-contextual öğesini ekleyin:

    <gmp-place-contextual id="widget"></gmp-place-contextual>

  2. Google Haritalar ile temellendirilmiş tüm yanıtlarda, bağlamsal widget'ı oluşturmak için kullanılabilecek bir googleMapsWidgetContextToken bulunur. Aşağıdaki işlevde, bağlam jetonunun nasıl güncelleneceği gösterilmektedir: 

    let widget = document.querySelector('#widget'); // a div that contains the widget
widget.contextToken = contextToken;
  3. İsteğe bağlı: Liste düzenini belirtin. Geçerli değerler şunlardır:
    • Küçük boyut: <gmp-place-contextual-list-config layout="compact">
    • Dikey düzen: <gmp-place-contextual-list-config layout="vertical">

    Aşağıdaki örnekte, liste düzeninin nasıl kompakt olarak değiştirileceği gösterilmektedir:

    <gmp-place-contextual id="widget">
  <gmp-place-contextual-list-config layout="compact">
  </gmp-place-contextual-list-config>
</gmp-place-contextual>
  4. İsteğe bağlı: Harita modunu değiştirin. Geçerli değerler şunlardır:
    • 2D yol haritası: <gmp-place-contextual-map-config map-mode="roadmap">
    • 3D karma harita: <gmp-place-contextual-map-config map-mode="hybrid">
    • Harita yok: <gmp-place-contextual-map-config map-mode="none">
    5. Aşağıdaki örnekte, harita modunun 2D harita olarak nasıl değiştirileceği gösterilmektedir: 
    <gmp-place-contextual id="widget">
  <gmp-place-contextual-map-config map-mode="roadmap">
  </gmp-place-contextual-map-config>
</gmp-place-contextual>

JavaScript kullanma

Aşağıdaki bölümde, PlaceContextualElement öğesi programatik olarak oluşturulup DOM'a eklenerek Google Haritalar bağlamsal widget'ının nasıl oluşturulacağı açıklanmaktadır.

  1. Bağlamsal widget oluşturun.

    let widget = document.querySelector('#widget');  // a div that contains the widget

async function createWidget(contextToken) {
  await google.maps.importLibrary('places');
  const placeContextualElement = new
      google.maps.places.PlaceContextualElement({ contextToken }); // contextToken can be empty at initialization.
  widget.appendChild(placeContextualElement);
}
  2. Google Haritalar ile temellendirilmiş tüm yanıtlarda, bağlamsal widget'ı oluşturmak için kullanılan ilgili bir googleMapsWidgetContextToken bulunur. Aşağıdaki işlevde bağlam jetonunun nasıl güncelleneceği gösterilmektedir: 
    widget.contextToken = contextToken;
  3. İsteğe bağlı: Liste düzenini belirtin. Geçerli değerler şunlardır:
    • Küçük boyut: google.maps.places.PlaceContextualListLayout.COMPACT
    • Dikey düzen: google.maps.places.PlaceContextualListLayout.VERTICAL

    4. Aşağıdaki örnekte, liste düzeninin nasıl kompakt olarak değiştirileceği gösterilmektedir:

    const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  layout: google.maps.places.PlaceContextualListLayout.COMPACT
});
widget.appendChild(widgetConfig);
  4. İsteğe bağlı: Harita modunu değiştirin. Geçerli değerler şunlardır:
    • 2D yol haritası: google.maps.places.PlaceContextualListMapMode.ROADMAP
    • 3D karma harita: google.maps.places.PlaceContextualListMapMode.HYBRID
    • Harita yok: google.maps.places.PlaceContextualListMapMode.NONE

    5. Aşağıdaki örnekte, harita modunun 2D harita olarak nasıl değiştirileceği gösterilmektedir:

    const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP
});
widget.appendChild(widgetConfig);

Yasaklı bölgeler

Google Haritalar, güvenli ve güvenilir bir platform sağlamak için belirli içerikleri ve etkinlikleri kısıtlar. Yasaklı bölgelerin listesi için Google Haritalar Platformu Yasaklı Bölgeler başlıklı makaleyi inceleyin.