Yer Adı Otomatik Tamamlama Widget'ı

Avrupa Ekonomik Alanı'ndaki (AEA) geliştiriciler

Fatura adresiniz Avrupa Ekonomik Alanı'ndaysa 8 Temmuz 2025'ten itibaren Hizmetleri kullanımınız Google Haritalar Platformu AEA Hizmet Şartları'na tabi olacaktır. İşlevler bölgeye göre değişir. Daha fazla bilgi edinin.

Yer Adı Otomatik Tamamlama widget'ı bir metin giriş alanı oluşturur, kullanıcı arayüzü seçim listesinde yer tahminleri sağlar ve kullanıcının seçimine yanıt olarak yer ayrıntılarını döndürür. Web sayfanıza eksiksiz ve bağımsız bir otomatik tamamlama kullanıcı arayüzü yerleştirmek için Yer Adı Otomatik Tamamlama widget'ını kullanın. API referansının tamamı için PlaceAutocompleteElement sayfasına bakın.

Ön koşullar

Yer Adı Otomatik Tamamlama'yı kullanmak için Google Cloud projenizde Places API'yi (Yeni) etkinleştirmeniz gerekir. Ayrıntılar için Başlayın bölümüne bakın.

Yenilikler

Yer Adı Otomatik Tamamlama aşağıdaki şekillerde iyileştirildi:

• Otomatik tamamlama widget'ı kullanıcı arayüzü; metin girişi yer tutucusu, tahmin listesi logosu ve yer tahminleri için bölgesel yerelleştirmeyi (sağdan sola yazılan diller dahil) destekler.
• Ekran okuyucu ve klavye etkileşimi desteği dahil olmak üzere gelişmiş erişilebilirlik.
• Otomatik tamamlama widget'ı, döndürülen nesnenin işlenmesini basitleştirmek için yeni Place sınıfını (Place referansı) döndürür.
• Mobil cihazlar ve küçük ekranlar için daha iyi destek.
• Daha iyi performans ve iyileştirilmiş grafik görünümü.

Otomatik tamamlama widget'ı ekleme

Otomatik tamamlama widget'ı bir metin giriş alanı oluşturur, kullanıcı arayüzü seçim listesinde yer tahminleri sağlar ve gmp-select dinleyicisini kullanarak kullanıcının tıklamasına yanıt olarak yer ayrıntılarını döndürür. Bu bölümde, bir web sayfasına veya Google haritasına otomatik tamamlama widget'ı ekleme işlemi gösterilmektedir.

Web sayfasına otomatik tamamlama widget'ı ekleme

Otomatik tamamlama widget'ını bir web sayfasına eklemek için yeni bir google.maps.places.PlaceAutocompleteElement oluşturun ve aşağıdaki örnekte gösterildiği gibi sayfaya ekleyin:

TypeScript

// Request needed libraries.
const { PlaceAutocompleteElement } =
    await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new PlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

// Request needed libraries.
const { PlaceAutocompleteElement } =
    await google.maps.importLibrary('places');
// Create the input HTML element, and append it.
const placeAutocomplete = new PlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);
index.js

Kod örneğinin tamamını inceleyin

Haritaya Otomatik Tamamlama widget'ı ekleme

Fatura adresiniz Avrupa Ekonomik Alanı (AEA) dışındaysa Otomatik Tamamlama widget'ını Google Haritalar ile de kullanabilirsiniz.

Bir haritaya Autocomplete widget'ı eklemek için önce gerekli kitaplıkları isteyin:

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

Ardından HTML'nizde, aşağıdaki örnekte gösterildiği gibi yeni bir gmp-place-autocomplete öğesini div içine ve bu div öğesini de gmp-map içine yerleştirin:

<gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
    <div
        class="place-autocomplete-card"
        slot="control-inline-start-block-start">
        <gmp-place-autocomplete
            placeholder="Search for a place..."></gmp-place-autocomplete>
    </div>
</gmp-map>
index.html

Bir haritaya programatik olarak Otomatik Tamamlama widget'ı eklemek için yeni bir google.maps.places.PlaceAutocompleteElement örneği oluşturun, PlaceAutocompleteElement öğesini bir div öğesine ekleyin ve aşağıdaki örnekte gösterildiği gibi slot özelliğini div öğesine uygulayın:

// In your TS or JS, request the needed libraries.
const { PlaceAutocompleteElement } = await google.maps.importLibrary("places");

// Get the map element.
const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

// Create the PlaceAutocompleteElement instance.
const placeAutocomplete = new PlaceAutocompleteElement({});

// Create a div and append the PlaceAutocompleteElement to it.
const card = document.createElement("div");
card.appendChild(placeAutocomplete);

// Apply the slot attribute to the div.
// This positions the control in the top-left corner of the map.
card.setAttribute("slot", "control-inline-start-block-start");

// Append the div to the map element (check for null).
if (mapElement) {
    mapElement.appendChild(card);
}

Kod örneğinin tamamını inceleyin

Yer tutucu metin ekleme

Yer tutucu metin eklemek için placeholder özelliğini kullanın. Aşağıdaki örnekte, HTML'de yer tutucu metnin nasıl ayarlanacağı gösterilmektedir:

<gmp-place-autocomplete
  placeholder="Search for a place..."
></gmp-place-autocomplete>

Yer tutucu metni programatik olarak da ayarlayabilirsiniz:

placeAutocomplete.placeholder = 'Search for a place...';

Otomatik tamamlama tahminlerini kısıtlama

Varsayılan olarak, Yer Adı Otomatik Tamamlama tüm yer türlerini sunar, kullanıcının konumuna yakın tahminler için ağırlık verir ve kullanıcının seçtiği yer için mevcut tüm veri alanlarını getirir. Sonuçları kısıtlayarak veya sonuçlara ağırlık vererek daha alakalı tahminler sunmak için PlaceAutocompleteElementOptions değerini ayarlayın.

Sonuçları kısıtlamak, otomatik tamamlama widget'ının kısıtlama alanının dışındaki sonuçları yok saymasına neden olur. Sonuçları harita sınırlarıyla kısıtlamak yaygın bir uygulamadır. Sonuçları yönlendirme, otomatik tamamlama widget'ının belirtilen alandaki sonuçları göstermesini sağlar ancak bazı eşleşmeler bu alanın dışında olabilir.

Herhangi bir sınır veya harita görüntü alanı sağlamazsanız API, kullanıcının konumunu IP adresinden algılamaya çalışır ve sonuçları bu konuma göre yönlendirir. Mümkün olduğunca sınır belirleyin. Aksi takdirde, farklı kullanıcılar farklı tahminler alabilir. Ayrıca, tahminleri genel olarak iyileştirmek için haritayı kaydırarak veya yakınlaştırarak ayarladığınız bir görüntüleme alanı ya da cihaz konumuna ve yarıçapına göre geliştirici tarafından ayarlanan bir görüntüleme alanı gibi mantıklı bir görüntüleme alanı sağlamak önemlidir. Yarıçap bilgisi mevcut olmadığında, Yer Adı Otomatik Tamamlama için 5 km makul bir varsayılan değer olarak kabul edilir. Yarıçapı sıfır olan bir görüntü alanı (tek bir nokta), yalnızca birkaç metre genişliğinde (100 metreden az) bir görüntü alanı veya tüm dünyayı kapsayan bir görüntü alanı ayarlamayın.

Yer aramasını ülkeye göre kısıtlama

Yer arama özelliğini bir veya daha fazla belirli ülkeyle kısıtlamak için includedRegionCodes özelliğini kullanarak ülke kodlarını aşağıdaki snippet'te gösterildiği gibi belirtin (bu örneklerde, placeAutocomplete adlı bir örnek oluşturduğunuz varsayılmıştır):

placeAutocomplete.includedRegionCodes = ['us', 'au'];;

Yer aramasını harita sınırlarıyla kısıtlama

Yer aramasını bir haritanın sınırlarıyla kısıtlamak için locationRestriction özelliğini kullanın. Aşağıdaki snippet'te, sınırları değiştiğinde güncellemek için bir dinleyicinin nasıl ekleneceği gösterilmektedir:

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});

locationRestriction politikasını kaldırmak için null olarak ayarlayın.

Yer arama sonuçlarını yönlendirme

Burada gösterildiği gibi locationBias özelliğini kullanarak yer arama sonuçlarını dairesel bir alana yönlendirin:

placeAutocomplete.locationBias = {radius: 100, center: {lat: 40.749933, lng: -73.98633}};

locationBias politikasını kaldırmak için null olarak ayarlayın.

Yer arama sonuçlarını belirli türlerle kısıtlama

includedPrimaryTypes özelliğini kullanarak ve burada gösterildiği gibi bir veya daha fazla tür belirterek yer arama sonuçlarını belirli yer türleriyle kısıtlayın:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Desteklenen türlerin tam listesi için Yer türü tabloları A ve B'ye bakın.

Yer ayrıntılarını alma

Seçilen yer için yer ayrıntılarını almak üzere aşağıdaki örnekte gösterildiği gibi PlaceAutocompleteElement öğesine bir gmp-select işleyici ekleyin:

TypeScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({
        placePrediction,
    }: google.maps.places.PlacePredictionSelectEvent) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

// Add the gmp-select listener, and display the results.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(),
            /* replacer */ null,
            /* space */ 2
        );
    }
);
index.js

Kod örneğinin tamamını inceleyin

Önceki örnekte, etkinlik işleyici bir PlacePredictionSelectEvent alır ve Place sınıfı (Place referansı) örneği almak için placePrediction.toPlace() yöntemini çağırır. Uygulamanız için gereken Yer Ayrıntıları veri alanlarını almak üzere place.fetchFields() yöntemini çağırın.

Bir sonraki örnekteki dinleyici, place.fetchFields() içindeki displayName, formattedAddress, location ve viewport alanlarını ister, ardından seçilen yeri haritada göstermek için fitBounds() ile place.viewport kullanır.

TypeScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location!);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

// Add the gmp-select listener, and display the results on the map.
placeAutocomplete.addEventListener(
    'gmp-select',
    async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'viewport',
            ],
        });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        } else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }

        const content = document.createElement('div');
        const nameText = document.createElement('span');
        nameText.textContent = place.displayName ?? 'No name';
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        const addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress ?? 'No address';
        content.appendChild(addressText);

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    }
);
index.js

Kod örneğinin tamamını inceleyin

Örnek haritalar

Bu bölümde, bu sayfada yer alan örnek haritaların tam kodu bulunur.

Otomatik tamamlama öğesi

Bu örnekte, bir web sayfasına Otomatik Tamamlama widget'ı eklenir ve seçilen her yer için sonuçlar gösterilir.

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({
            placePrediction,
        }: google.maps.places.PlacePredictionSelectEvent) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

async function init() {
    // Request needed libraries.
    const { PlaceAutocompleteElement } =
        await google.maps.importLibrary('places');
    // Create the input HTML element, and append it.
    const placeAutocomplete = new PlaceAutocompleteElement();
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-select listener, and display the results.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: ['displayName', 'formattedAddress', 'location'],
            });
            selectedPlaceTitle.textContent = 'Selected Place:';
            selectedPlaceInfo.textContent = JSON.stringify(
                place.toJSON(),
                /* replacer */ null,
                /* space */ 2
            );
        }
    );
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete element</title>

        <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"
            });
        </script>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>
    </body>
</html>
index.html

Otomatik tamamlama haritası

Bu örnekte, Google Haritalar'a nasıl otomatik tamamlama widget'ı ekleyeceğiniz gösterilmektedir.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function init(): Promise<void> {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds()!;
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location!);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(
    content: string | Element | Text | null | undefined,
    center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined
) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();
index.ts

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }, { InfoWindow }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infoWindow.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new InfoWindow();

    // Add the gmp-select listener, and display the results on the map.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'viewport',
                ],
            });

            // If the place has a geometry, then present it on a map.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location);
                innerMap.setZoom(17);
            }

            const content = document.createElement('div');
            const nameText = document.createElement('span');
            nameText.textContent = place.displayName ?? 'No name';
            content.appendChild(nameText);
            content.appendChild(document.createElement('br'));
            const addressText = document.createElement('span');
            addressText.textContent = place.formattedAddress ?? 'No address';
            content.appendChild(addressText);

            updateInfoWindow(content, place.location);
            marker.position = place.location;
        }
    );
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: small;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete map</title>

        <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"
            });
        </script>
    </head>
    <body>
        <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <gmp-place-autocomplete
                    placeholder="Search for a place..."></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>
index.html

Otomatik tamamlama (yeni) optimizasyonu

Bu bölümde, Otomatik Tamamlama (Yeni) hizmetinden en iyi şekilde yararlanmanıza yardımcı olacak en iyi uygulamalar açıklanmaktadır.

Genel kurallardan bazıları şunlardır:

• Çalışan bir kullanıcı arayüzü geliştirmenin en hızlı yolu, Maps JavaScript API Otomatik Tamamlama (Yeni) widget'ını, Android için Yerler SDK'sı Otomatik Tamamlama (Yeni) widget'ını veya iOS için Yerler SDK'sı Otomatik Tamamlama (Yeni) widget'ını kullanmaktır.
• Temel Otomatik Tamamlama (Yeni) veri alanlarını en baştan anlayın.
• Konum tercihi ve konum kısıtlama alanları isteğe bağlıdır ancak otomatik tamamlama performansı üzerinde önemli bir etkiye sahip olabilir.
• API bir hata döndürürse uygulamanızın düzgün bir şekilde çalışmaya devam etmesi için hata işleme özelliğini kullanın.
• Uygulamanızın, seçim yapılmadığında bu durumu ele aldığından ve kullanıcılara devam etme yolu sunduğundan emin olun.

Maliyet optimizasyonuyla ilgili en iyi uygulamalar

Temel maliyet optimizasyonu

Autocomplete (New) hizmetini kullanma maliyetini optimize etmek için Yer Ayrıntıları (New) ve Autocomplete (New) widget'larında alan maskeleri kullanarak yalnızca ihtiyacınız olan Autocomplete (New) veri alanlarını döndürün.

Gelişmiş maliyet optimizasyonu

SKU: Autocomplete Request fiyatlandırmasına erişmek ve Yer Ayrıntıları (Yeni) yerine seçilen yerle ilgili Geocoding API sonuçları istemek için Autocomplete'in (Yeni) programatik uygulamasını kullanabilirsiniz. Geocoding API ile eşlenen istek başına fiyatlandırma, aşağıdaki koşulların her ikisi de karşılandığında oturum başına (oturum tabanlı) fiyatlandırmadan daha uygun maliyetlidir:

• Yalnızca kullanıcının seçtiği yerin enlem ve boylamına veya adresine ihtiyacınız varsa Geocoding API, bu bilgileri Yer Ayrıntıları (Yeni) çağrısından daha düşük bir ücret karşılığında sağlar.
• Kullanıcılar, ortalama dört veya daha az Otomatik Tamamlama (Yeni) tahmin isteği içinde bir otomatik tamamlama tahmini seçerse istek başına fiyatlandırma, oturum başına fiyatlandırmadan daha uygun maliyetli olabilir.

Uygulamanız için en düşük maliyetli Autocomplete (New) uygulamasını seçmek üzere aşağıdaki tabloda uygulamanızın ihtiyaçlarına uygun satırı bulun.

Uygulamanızın ihtiyaç duyduğu izinler	Kullanıcı bir tahmin seçmeden önce ortalama Otomatik Tamamlama (Yeni) isteği sayısı	Önerilen uygulama
Adres ve konum dışındaki yer ayrıntıları (ör. yer adı, işletme durumu veya çalışma saatleri)	Herhangi bir sayıda	Yer Ayrıntıları (Yeni) ile oturum tabanlı Otomatik Tamamlama (Yeni)
Yalnızca seçilen tahminin adresi ve enlem/boylamı	Dört veya daha az	Geocoding API ile istek başına Autocomplete (New)
Yalnızca seçilen tahminin adresi ve enlem/boylamı	Dörtten fazla	Yalnızca adres uygulamaları için oturum tabanlı Autocomplete (New)

Geocoding API, Autocomplete (New) kullanımınızın performansına bağlı olarak uygulamanız için Yer Ayrıntıları (New)'dan daha uygun maliyetli bir seçenek olabilir. Her uygulamanın Autocomplete (New) verimliliği; kullanıcıların ne girdiğine, uygulamanın nerede kullanıldığına ve performans optimizasyonuyla ilgili en iyi uygulamaların hayata geçirilip geçirilmediğine bağlı olarak değişir.

Tablo için ortalama istek sayısını bulmak istiyorsanız uygulamanızda bir Otomatik Tamamlama (Yeni) tahminini seçmeden önce kullanıcının ortalama kaç karakter yazdığını analiz edin.

Yer Ayrıntıları (Yeni) ile oturuma dayalı Otomatik Tamamlama (Yeni)

Oturuma dayalı Otomatik Tamamlama (Yeni) özelliğini Yer Ayrıntıları (Yeni) ile kullanın.
Uygulamanız yer adı, işletme durumu veya çalışma saatleri gibi Yer Ayrıntıları (Yeni) bilgilerini gerektirdiğinden Otomatik Tamamlama (Yeni) uygulamanızda, istediğiniz yer veri alanlarına bağlı olarak oturum başına bir oturum jetonu (programatik olarak veya JavaScript, Android ya da iOS widget'larına yerleşik olarak) ve geçerli Places SKU'ları kullanılmalıdır.¹

Widget uygulaması
Oturum yönetimi; JavaScript, Android veya iOS widget'larına otomatik olarak yerleştirilir. Buna, seçilen tahminle ilgili hem Otomatik Tamamlama (Yeni) istekleri hem de Yer Ayrıntıları (Yeni) isteği dahildir. Yalnızca ihtiyacınız olan Autocomplete (New) veri alanlarını istediğinizden emin olmak için fields parametresini belirttiğinizden emin olun.

Programatik uygulama
Otomatik Tamamlama (Yeni) isteklerinizde oturum jetonu kullanın. Seçilen tahminle ilgili Yer Ayrıntıları (Yeni) isteğinde bulunurken aşağıdaki parametreleri ekleyin:

1. Otomatik Tamamlama (Yeni) yanıtındaki yer kimliği
2. Autocomplete (New) isteğinde kullanılan oturum jetonu
3. İhtiyacınız olan Otomatik Tamamlama (Yeni) veri alanlarını belirten fields parametresi

Geocoding API ile istek başına Autocomplete (New)

Autocomplete'i (New) oturum jetonları olmadan programatik olarak uygulayın ve seçilen yer tahmini için Geocoding API'yi çağırın.
Geocoding API, adresleri ve enlem/boylam koordinatlarını sağlar. Dört Autocomplete Requests isteği ve seçilen yer tahminiyle ilgili bir Geocoding API çağrısı yapmanın maliyeti, oturum başına Autocomplete (New) maliyetinden daha düşüktür.¹

Kullanıcılarınızın aradıkları tahmini daha az karakterle almalarına yardımcı olmak için performansla ilgili en iyi uygulamalardan yararlanabilirsiniz.

Yalnızca adres uygulamaları için oturuma dayalı Autocomplete (New)

Oturuma dayalı Otomatik Tamamlama (Yeni) özelliğini Yer Ayrıntıları (Yeni) ile kullanın.
Kullanıcı bir Otomatik Tamamlama (Yeni) tahminini seçmeden önce yapmayı beklediğiniz ortalama istek sayısı, oturum başına fiyatlandırma maliyetini aştığından Otomatik Tamamlama (Yeni) uygulamanızda hem Otomatik Tamamlama (Yeni) istekleri hem de ilişkili Yer Ayrıntıları (Yeni) isteği için oturum jetonu kullanılmalıdır. oturum başına. ¹

Widget uygulaması
Oturum yönetimi; JavaScript, Android veya iOS widget'larına otomatik olarak yerleştirilir. Buna, seçilen tahminle ilgili hem Otomatik Tamamlama (Yeni) istekleri hem de Yer Ayrıntıları (Yeni) isteği dahildir. Yalnızca ihtiyacınız olan alanları istediğinizden emin olmak için fields parametresini belirttiğinizden emin olun.

Programatik uygulama
Autocomplete (New) isteklerinizde oturum jetonu kullanın. Seçilen tahminle ilgili Yer Ayrıntıları (Yeni) isteğinde bulunurken aşağıdaki parametreleri ekleyin:

1. Otomatik Tamamlama (Yeni) yanıtındaki yer kimliği
2. Autocomplete (New) isteğinde kullanılan oturum jetonu
3. Adres ve geometri gibi alanları belirten fields parametresi

Autocomplete (New) isteklerini geciktirmeyi düşünün
Uygulamanızın daha az istek göndermesi için Autocomplete (New) isteğini kullanıcı ilk üç veya dört karakteri yazana kadar geciktirme gibi stratejiler kullanabilirsiniz. Örneğin, kullanıcı üçüncü karakteri yazdıktan sonra her karakter için Autocomplete (New) istekleri yapılması, kullanıcı yedi karakter yazıp ardından bir Geocoding API isteği yaptığınız bir tahmini seçerse toplam maliyetin 4 Autocomplete (New) istek başına + Geocoding için olacağı anlamına gelir.¹

İstekleri geciktirmek ortalama programatik istek sayınızı dörtten az yapabiliyorsa Geocoding API ile yüksek performanslı Autocomplete (New) uygulamasıyla ilgili kılavuzu takip edebilirsiniz. İsteklerin geciktirilmesinin, her yeni tuş vuruşunda tahminleri görmeyi bekleyen kullanıcı tarafından gecikme olarak algılanabileceğini unutmayın.

Kullanıcılarınızın aradıkları tahmini daha az karakterle bulmalarına yardımcı olmak için performansla ilgili en iyi uygulamalardan yararlanabilirsiniz.

---

1. Maliyetler için Google Haritalar Platformu fiyat listelerine bakın.

Performansla ilgili en iyi uygulamalar

Aşağıdaki yönergelerde, Otomatik Tamamlama (Yeni) performansını optimize etme yöntemleri açıklanmaktadır:

• Otomatik Tamamlama (Yeni) uygulamanıza ülkeye özgü kısıtlamalar, konum ağırlığı ve (programatik uygulamalar için) dil tercihleri ekleyin. Widget'lar, dil tercihlerini kullanıcının tarayıcısından veya mobil cihazından aldığı için widget'larda dil tercihine gerek yoktur.
• Autocomplete (New) ile birlikte bir harita varsa konumu harita görüntü alanına göre yönlendirebilirsiniz.
• Kullanıcı, Autocomplete (New) tahminlerinden birini seçmediğinde (genellikle bu tahminlerden hiçbiri istenen sonuç adresi olmadığı için) daha alakalı sonuçlar elde etmek için orijinal kullanıcı girişini yeniden kullanabilirsiniz:
  • Kullanıcının yalnızca adres bilgisi girmesini bekliyorsanız Geocoding API çağrısında orijinal kullanıcı girişini yeniden kullanın.
  • Kullanıcının belirli bir yer için ad veya adresle sorgu girmesini bekliyorsanız Yer Ayrıntıları (Yeni) isteği kullanın. Sonuçların yalnızca belirli bir bölgede gösterilmesi bekleniyorsa konum ağırlığı kullanın.
  Geocoding API'ye başvurmanın en iyi seçenek olduğu diğer senaryolar şunlardır:
  • Kullanıcılar, bir binadaki belirli birimlerin veya dairelerin adresleri gibi alt tesis adreslerini giriyor. Örneğin, Çekçe "Stroupežnického 3191/17, Praha" adresi, Otomatik Tamamlama (Yeni) özelliğinde kısmi bir tahmin döndürür.
  • Kullanıcılar, New York'ta "23-30 29th St, Queens" veya Hawaii'nin Kauai adasında "47-380 Kamehameha Hwy, Kaneohe" gibi yol segmenti ön ekleri içeren adresler giriyor.

Konuma göre yönlendirme

location parametresi ve radius parametresi ileterek sonuçları belirli bir alana göre önceliklendirin. Bu, Otomatik Tamamlama'ya (Yeni) tanımlanan alan içindeki sonuçları göstermeyi tercih etmesini söyler. Tanımlanan alanın dışındaki sonuçlar gösterilmeye devam edebilir. Sonuçları yalnızca belirtilen bir ülkedeki yerleri gösterecek şekilde filtrelemek için includedRegionCodes parametresini kullanabilirsiniz.

Uyarı: radius sağlanmazsa location parametresi yoksayılır.

Arama alanı geniş olduğunda, işletme sonuçları genellikle sonuçlarda gösterilecek kadar yüksek sıralamaya sahip olmaz. İşletmelerin karma işletme/coğrafi kod sonuçlarında görünmesini istiyorsanız daha küçük bir yarıçap belirtebilirsiniz. Alternatif olarak, sonuçları yalnızca işletmelerle sınırlamak için types=establishment kullanın.

Konum kısıtlama

locationRestriction parametresini ileterek sonuçları belirli bir alanla kısıtlayın.

Ayrıca, locationRestriction parametresini ekleyerek sonuçları location ve radius parametresiyle tanımlanan bölgeyle kısıtlayabilirsiniz. Bu, Otomatik Tamamlama'ya (Yeni) yalnızca bu bölgedeki sonuçları döndürmesini söyler.

Not: Konum kısıtlamaları yalnızca rotaların tamamına uygulanır. Konum kısıtlamasıyla çakışan bir rotaya göre, konum kısıtlamasının dışında bulunan yapay sonuçlar döndürülebilir.