Gelişmiş Yer Arama Öğesi (önizleme)

AdvancedPlaceSearchElement, bir yer aramasının sonuçlarını listede oluşturmak için kullanılan bir HTML öğesidir. gmp-advanced-place-search öğesini yapılandırmanın iki yolu vardır:

Hem yakındaki yerleri arama hem de metin arama, işlem düğmelerini özelleştirme, yorumları ve medyaları filtreleme, Yer ilişkilendirmesini yapılandırma, yer seçimi ve hataları işleme gibi aynı ileri seviye özellikleri sunar.

Yakın çevrede arama isteği

Menüden bir yer türü seçerek bu yer türüyle ilgili yakındaki arama sonuçlarını görebilirsiniz.

Yakındaki arama özelliği öncelikle yer türüne ve konuma göre arama yapacak şekilde yapılandırılır. Sonuçlar, rankPreference özelliği kullanılarak mesafeye veya popülerliğe göre sıralanabilir. Daha fazla ayrıntı için PlaceNearbySearchRequestElement sınıfı referans belgelerini inceleyin.

Bu örnekte, kullanıcı tarafından seçilen yer türüyle yapılan bir yakındaki arama isteğine yanıt olarak Gelişmiş Yer Arama öğesi oluşturulur. Ayrıca, seçilen yer için bir AdvancedPlaceDetailsCompactElement de gösterir.

Gelişmiş Yer Arama öğesini haritaya eklemek için HTML sayfasına iç içe yerleştirilmiş gmp-place-nearby-search-request öğesi içeren bir gmp-advanced-place-search öğesi ekleyin. 

<gmp-advanced-place-search selectable>
    <!-- Nearby search requests require a location restriction to return results. Often set programmatically. -->
    <gmp-place-nearby-search-request max-result-count="5"></gmp-place-nearby-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

select öğesi, kullanıcının menüden bir yer türü seçmesine olanak tanır. Basitlik için yalnızca üç yer türü listelenir: restoran, kafe ve elektrikli araç şarj istasyonu. 

<div class="controls">
    <label for="type-select">
        Select a place type:
        <select id="type-select" class="type-select">
            <option value="restaurant">Restaurant</option>
            <option value="cafe" selected>Cafe</option>
            <option value="electric_vehicle_charging_station">
                EV charging station
            </option>
        </select>
    </label>
</div>

Kullanıcı menüden bir yer türü seçtiğinde gmp-place-nearby-search-request öğesi güncellenir ve Gelişmiş Yer Arama öğesi sonuçları gösterir.

Metin isteğiyle arama

Giriş alanına bir arama terimi girin ve terimle eşleşen yerlerin listesini almak için Ara düğmesini tıklayın.

Metin araması öncelikle metin sorgusu ve konum kullanarak arama yapacak şekilde yapılandırılır. Sonuçlar fiyat düzeyi, puan ve şu anda açık olup olmadıklarına göre daraltılabilir. Sonuçlar, rankPreference özelliği kullanılarak mesafeye veya popülerliğe göre de sıralanabilir. Daha fazla ayrıntı için PlaceTextSearchRequestElement sınıfı referans belgelerini inceleyin.

Bu örnekte, kullanıcı metin girişine yanıt olarak Gelişmiş Yer Arama öğesi oluşturulur. Ayrıca, seçilen yer için AdvancedPlaceDetailsCompactElement öğesini de gösterir.

Gelişmiş Yer Arama öğesini haritaya eklemek için HTML sayfasına iç içe yerleştirilmiş gmp-place-text-search-request öğesi içeren bir gmp-advanced-place-search öğesi ekleyin. 

<gmp-advanced-place-search selectable>
    <gmp-place-text-search-request max-result-count="5"></gmp-place-text-search-request>
    <template slot="place-list-item">
        <gmp-place-all-content></gmp-place-all-content>
    </template>
</gmp-advanced-place-search>

input öğesi, kullanıcının arama metni girmesine olanak tanır. 

<div class="controls">
    <input
        type="text"
        id="query-input"
        class="query-input"
        placeholder="Search for a place"
        value="cafe" />
    <button id="search-button" class="search-button">
        Search
    </button>
</div>

Kullanıcı Ara düğmesini tıkladığında arama işlevi çalıştırılır, gmp-place-text-search-request öğesi güncellenir ve Gelişmiş Yer Arama öğesi sonuçları gösterir.

Gelişmiş özellikler

İşlem düğmelerini özelleştirme

Gelişmiş Yer Arama bileşeninin <template slot="place-list-item"> öğesine alt öğe olarak işlem düğmeleri 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 şeklindedir. slot özelliği atlanırsa varsayılan olarak action-main değeri kullanılır. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
    <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
  </template>
</gmp-advanced-place-search>

Yorumları ve medyayı filtreleme

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

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
    <gmp-place-media query="coffee"></gmp-place-media>
    <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
  </template>
</gmp-advanced-place-search>

Yer atfını yapılandırma

Görsel ilişkilendirmeyi yapılandırmak için <gmp-place-attribution> öğesi ekleyerek bir fotoğrafın veya yorumun kaynağı gibi kapsamlı Haritalar API veri ilişkilendirme yapılandırmalarını görüntüleyin. <template> öğesinin doğrudan eşdüzey öğesi olarak eklenmelidir. <template> öğesinin içine yerleştirilen ilişkilendirmeler yoksayılır. 

<gmp-advanced-place-search selectable>
  <gmp-place-text-search-request text-query="pizza" max-result-count="5"></gmp-place-text-search-request>
  <template slot="place-list-item">
    <gmp-place-name></gmp-place-name>
  </template>
  <gmp-place-attribution light-scheme-color="black" dark-scheme-color="gray"></gmp-place-attribution>
</gmp-advanced-place-search>

Yer seçimi ve hataları yönetme

selectable özelliği mevcut olduğunda kullanıcının seçtiği yeri almak için gmp-select etkinliğini dinleyebilirsiniz. Yer verilerinin alınamadığı senaryoları düzgün bir şekilde işlemek için gmp-error etkinliğini de dinleyebilirsiniz. 

const searchElement = document.querySelector('gmp-advanced-place-search');

searchElement.addEventListener('gmp-select', (e) => {
  console.log('User selected place: ', e.place);
});

searchElement.addEventListener('gmp-error', (e) => {
  // e.detail contains the structured error payload
  console.error('Failed to load places: ', e.detail.error);
});