Gelişmiş Yer Listesi Öğesi

AdvancedPlaceListElement, yer kaynak adları verilen bir listedeki yer koleksiyonunu oluşturan bir HTML öğesidir.

Gelişmiş Yer Listesi Öğesi, işlem düğmelerini özelleştirme, Yer atıfını yapılandırma ve hataları işleme gibi ileri seviye özellikler sunar.

Temel kullanım

Bileşeni kullanmak için sayfanıza bir <gmp-advanced-place-list> öğesi ekleyin ve places özelliği aracılığıyla boşlukla ayrılmış bir yer kaynağı adları listesi iletin.

Tam kod örneğini inceleyin

TypeScript

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e: Event) => {
            const customEvent = e as CustomEvent<{ errors?: unknown }>;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('places');
    await customElements.whenDefined('gmp-advanced-place-list');
    const listElement = document.querySelector('gmp-advanced-place-list');

    if (listElement) {
        listElement.addEventListener('gmp-error', (e) => {
            const customEvent = e;
            console.error(
                'Failed to load places: ',
                customEvent.detail.errors ?? customEvent
            );
        });
    }
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, Arial, sans-serif;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Advanced Place List</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <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",
                v: "beta"
            });
        </script>
    </head>
    <body>
        <gmp-advanced-place-list
            places="places/ChIJLU7jZClu5kcR4PcOOO6p3I0 places/ChIJrRMgU7ZhLxMRxAOFkC7I8Sg places/ChIJbf8C1yFxdDkR3n12P4DkKt0 places/ChIJPTacEpBQwokRKwIlDXelxkA places/ChIJVVVViV-abZERJxqgpA43EDo">
            <template slot="details-item">
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-media query="coffee"></gmp-place-media>
            </template>
        </gmp-advanced-place-list>
    </body>
</html>

Gelişmiş özellikler

İşlem düğmelerini özelleştirme

İşlem düğmelerini, Gelişmiş Yer Listesi bileşeninin <template slot="details-item"> öğesinin içine alt öğe olarak ekleyin. Standart gezinme bağlantıları için <gmp-place-link> 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. slot özelliği atlanırsa varsayılan olarak action-main kullanılır. 

<gmp-advanced-place-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-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-list>

Yer ilişkilendirmesini yapılandırma

Görsel atıfı yapılandırmak için bir <gmp-place-attribution> öğesi ekleyerek fotoğraf veya yorum kaynağı gibi kapsamlı Maps API veri atıfı 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-list places="places/ChIJT7FdmYiAhYAROFOvrIxRJDU">
  <template slot="details-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-list>

Hataları işleme

İstenen bir veya daha fazla yer yüklenemediğinde senaryoları düzgün bir şekilde işlemek için gmp-error etkinliğini dinleyebilirsiniz. 

const listElement = document.querySelector('gmp-advanced-place-list');
listElement.addEventListener('gmp-error', (e) => {
  // e.detail.errors contains an array of failure objects with specific failed Resource Names
  console.error('Failed to load places: ', e.detail.errors);
});