Yer Adı Otomatik Tamamlama Widget'ı

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

Fatura adresiniz Avrupa Ekonomik Alanı'ndaysa 8 Temmuz 2025'ten itibaren Hizmetler'i 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 (New)'yi 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 okuyucular ve klavye etkileşimi desteği de 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, web sayfasına veya Google Haritalar'a otomatik tamamlama widget'ı ekleme hakkında bilgi verilmektedir.

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 Otomatik Tamamlama widget'ı eklemek için önce gerekli kitaplıkları isteyin (burada gösterildiği gibi):

// 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ı yoksaymasına neden olur. Sonuçları harita sınırlarıyla kısıtlamak yaygın bir uygulamadır. Sonuçları ağırlıklandırma, otomatik tamamlama widget'ının belirtilen alan içindeki 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 tespit etmeye çalışır ve sonuçları bu konuma göre düzenler. 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 haritada kaydırma veya yakınlaştırma yaparak ayarladığınız bir görünüm penceresi ya da cihaz konumuna ve yarıçapa göre geliştirici tarafından ayarlanan bir görünüm penceresi gibi mantıklı bir görünüm penceresi sağlamak önemlidir. Yarıçap kullanılamadığı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 aramasını bir veya daha fazla ülke ile sınırlamak için aşağıdaki snippet'te gösterildiği gibi ülke kodlarını belirtmek üzere includedRegionCodes özelliğini kullanın (Bu snippet'te placeAutocomplete adlı bir örnek oluşturduğunuz varsayılır):

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

Yer arama işlemini 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 bunları güncellemek için nasıl bir dinleyici 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 simgesini kaldırmak için null olarak ayarlayın.

Yer arama sonuçlarını saptırma

locationBias özelliğini kullanarak yer arama sonuçlarını daire şeklinde bir alana yönlendirin. Örnek:

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

locationBias simgesini 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 sınırlayı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 yerle ilgili yer ayrıntılarını almak için aşağıdaki örnekte gösterildiği gibi PlaceAutocompleteElement öğesine bir gmp-select dinleyici 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

Yukarıdaki ö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.

Sonraki örnekteki dinleyici, place.fetchFields() içinde displayName, formattedAddress, location ve viewport alanlarını ister, ardından seçilen yeri haritada göstermek için place.viewport ile fitBounds()'ü 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 yerin 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 Haritası'na otomatik tamamlama widget'ının nasıl ekleneceği 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 şunları kullanmaktır: Maps JavaScript API Autocomplete (New) widget'ı, Android için Yerler SDK'sı Autocomplete (New) widget'ı, veya iOS için Yerler SDK'sı Autocomplete (New) widget'ı.
• Temel Autocomplete (New) 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 etkisi olabilir.
• API hata döndürürse uygulamanızın sorunsuz bir şekilde çalışmaya devam etmesini sağlamak için hata işlemeyi 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 optimizasyonu ile ilgili en iyi uygulamalar

Temel maliyet optimizasyonu

Autocomplete (Yeni) hizmetinin kullanım maliyetini optimize etmek için Place Details (Yeni) ve Autocomplete (Yeni) widget'larında yalnızca ihtiyacınız olan Autocomplete (Yeni) veri alanlarını döndürmek üzere alan maskeleri kullanın.

Gelişmiş maliyet optimizasyonu

Aşağıdakilere erişmek için Otomatik Tamamlama (Yeni) özelliğini programatik olarak uygulamayı düşünebilirsiniz: SKU: Otomatik Tamamlama İsteği fiyatlandırması Ayrıca, Yer Ayrıntıları (Yeni) yerine seçilen yerle ilgili Geocoding API sonuçları isteğinde bulunabilirsiniz. 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ırmaya göre daha uygun maliyetli olabilir.

İhtiyaçlarınıza uygun Autocomplete (New) uygulamasını seçme konusunda yardım almak için aşağıdaki soruya verdiğiniz yanıtla ilgili sekmeyi seçin.

Uygulamanız, seçilen tahminin adresi ve enlem/boylamı dışında başka bilgi gerektiriyor mu?

Evet, daha fazla ayrıntı gerekiyor

Yer ayrıntıları (Yeni) ile oturuma dayalı otomatik tamamlama (Yeni) özelliğini kullanın.
Uygulamanızda yer adı, işletme durumu veya çalışma saatleri gibi Yer Ayrıntıları (Yeni) özelliği gerektiğinden, Otomatik Tamamlama (Yeni) özelliğini uygularken bir oturum jetonu (programatik olarak veya JavaScript, Android ya da iOS widget'larına yerleştirilmiş olarak) kullanmanız gerekir.¹ İstediğiniz yer verileri alanlarına bağlı olarak, oturum başına geçerli Places SKU'ları da eklenmelidir.

Widget uygulama
Oturum yönetimi, otomatik olarak JavaScript, Android, veya iOS widget'larına yerleştirilmiştir. 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. Otomatik tamamlama (yeni) isteğinde kullanılan oturum jetonu
3. İhtiyacınız olan Otomatik Tamamlama (Yeni) veri alanlarını belirten fields parametresi

Hayır, yalnızca adres ve konum bilgisi gerekiyor

Coğrafi kodlama API'si, Otomatik Tamamlama (Yeni) kullanımınızın performansına bağlı olarak uygulamanız için Yer Ayrıntıları (Yeni) hizmetinden 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.

Aşağıdaki soruyu yanıtlamak için bir kullanıcının uygulamanızda Otomatik Tamamlama (Yeni) tahminini seçmeden önce ortalama kaç karakter yazdığını analiz edin.

Kullanıcılarınız, ortalama olarak dört veya daha az istekte bir otomatik tamamlama (yeni) tahmini seçiyor mu?

Evet

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. Seçilen yer tahminiyle ilgili dört otomatik tamamlama isteği ve bir Geocoding API çağrısı yapmanın maliyeti, oturum başına otomatik tamamlama (yeni) oturum başına maliyetinden 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 uygulamaları kullanabilirsiniz.

Hayır

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

Widget uygulaması
Oturum yönetimi; JavaScript, Android veya iOS widget'larına otomatik olarak yerleştirilir. Buna hem otomatik tamamlama (yeni) istekleri hem de seçilen tahmindeki 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 (Yeni) isteklerinizde oturum jetonu kullanın. Seçilen tahminle ilgili yer ayrıntıları (yeni) istenirken aşağıdaki parametreler eklenmelidir:

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 Otomatik Tamamlama (Yeni) istekleri gönderdiğinizde, kullanıcı yedi karakter yazıp bir Geocoding API isteği gönderdiğiniz bir tahmini seçerse toplam maliyet 4 Otomatik Tamamlama (Yeni) İstek Başına + Geocoding maliyeti olur.¹

İ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) özelliğine bir harita eşlik ediyorsa konumu harita görüntü alanına göre yönlendirebilirsiniz.
• Kullanıcı, Otomatik Tamamlama (Yeni) tahminlerinden birini seçmediğinde (genellikle bu tahminlerden hiçbiri istenen sonuç adresi olmadığı için) daha alakalı sonuçlar elde etmek amacıyla orijinal kullanıcı girişini yeniden kullanabilirsiniz:
  • Kullanıcının yalnızca adres bilgisi girmesini bekliyorsanız Geocoding API'ye yapılan bir çağrıda 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 olması bekleniyorsa konum önceliği kullanın.
  Geocoding API'ye başvurmanın en iyi seçenek olduğu diğer senaryolar şunlardır:
  • Kullanıcılar, bir bina içindeki belirli birimlerin veya dairelerin adresleri gibi alt tesis adreslerini girerken. Örneğin, Çekçe adres "Stroupežnického 3191/17, Praha" için Otomatik Tamamlama (Yeni) özelliğinde kısmi bir tahmin elde edilir.
  • 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.

Konum tercihi

Bir location parametresi ve bir radius parametresi ileterek sonuçları belirli bir alana yönlendirin. Bu, otomatik tamamlama (yeni) özelliğine, tanımlanan alan içindeki sonuçları göstermeyi tercih etmesi talimatını verir. Tanımlanan alanın dışındaki sonuçlar gösterilmeye devam edebilir. Sonuçları filtreleyerek yalnızca belirli bir ülke içindeki yerleri göstermek 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 kuruluşlarla sınırlamak için types=establishment simgesini kullanın.

Konum kısıtlama

locationRestriction parametresini ileterek sonuçları belirli bir alanla sınırlayı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.