Yer Adı Otomatik Tamamlama Widget'ı

Avrupa Ekonomik Alanı (AEA) geliştiricileri

Yer Otomatik Tamamlama Widget'ı bir metin girişi 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 Place Autocomplete Widget'ı kullanın.

Ön koşullar

Yer Otomatik Tamamlama'yı kullanmak için Google Cloud projenizde "Places API (yeni)"yi etkinleştirmeniz gerekir. Ayrıntılar için Başlangıç başlıklı makaleyi inceleyin.

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 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 kolaylaştırmak için yeni Yer sınıfını 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şi 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 Haritası'na nasıl otomatik tamamlama widget'ı ekleyeceğiniz 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.
(await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
// Create the input HTML element, and append it.
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
    {}
);
document.body.appendChild(placeAutocomplete);
index.ts

JavaScript

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

Tam kod örneğine bakın

Haritaya otomatik tamamlama widget'ı ekleme

Faturalandırma adresiniz Avrupa Ekonomik Alanı (AEA) dışındaysa Google Haritalı otomatik tamamlama widget'ını da kullanabilirsiniz.

Haritaya otomatik tamamlama widget'ı eklemek için yeni bir google.maps.places.PlaceAutocompleteElement örneği oluşturun, PlaceAutocompleteElement öğesini div öğesine ekleyin ve aşağıdaki örnekte gösterildiği gibi özel bir kontrol olarak haritaya gönderin:

TypeScript

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

// 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();
});
index.ts

JavaScript

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});
// 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();
});
index.js

Tam kod örneğine bakın

Otomatik tamamlama tahminlerini kısıtlama

Yer Otomatik Tamamlama, varsayılan olarak kullanıcının konumuna yakın tahminler için önyargılı bir şekilde tüm yer türlerini sunar ve kullanıcının seçtiği yer için mevcut tüm veri alanlarını getirir. Sonuçları kısıtlayarak veya yönlendirerek daha alakalı tahminler sunmak için PlaceAutocompleteElementOptions'ı ayarlayın.

Sonuçların kısıtlanması, otomatik tamamlama widget'ının kısıtlama alanı dışında kalan sonuçları yoksaymasına neden olur. Sonuçları harita sınırlarıyla kısıtlamak yaygın bir uygulamadır. Sonuçları önyargılı hale getirmek, otomatik tamamlama widget'ının belirtilen alan içindeki sonuçları göstermesine neden olur 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ğunda 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 alanı ya da cihaz konumuna ve yarıçapa göre geliştirici tarafından ayarlanan bir görünüm alanı gibi mantıklı bir görünüm alanı sağlamak önemlidir. Yarıçap bilgisi yoksa Yer Otomatik Tamamlama için 5 km makul bir varsayılan değer olarak kabul edilir. Sıfır yarıçaplı (tek bir nokta), yalnızca birkaç metre genişliğinde (100 metreden kısa) veya tüm dünyayı kapsayan bir görüntü alanı ayarlamayın.

Yer arama özelliğini ülkeye göre kısıtlama

Yer arama işlemini bir veya daha fazla ülkeyle kısıtlamak için aşağıdaki snippet'te gösterildiği gibi ülke kodlarını belirtmek üzere includedRegionCodes özelliğini kullanın:

const pac = new google.maps.places.PlaceAutocompleteElement({
  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 aşağıdaki snippet'te gösterildiği gibi sınırları eklemek üzere locationRestrictions özelliğini kullanın:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

Harita sınırlarıyla kısıtlama yaparken, sınırlar değiştiğinde güncelleyecek bir dinleyici eklediğinizden emin olun:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

locationRestriction öğesini kaldırmak için null olarak ayarlayın.

Yer arama sonuçlarında yanlılık

locationBias özelliğini kullanarak ve burada gösterildiği gibi bir yarıçap ileterek yer arama sonuçlarını daire şeklindeki bir alana yönlendirin:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

locationBias öğesini kaldırmak için null olarak ayarlayın.

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

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 A ve B yer türü tabloları başlıklı makaleyi inceleyin.

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 gmp-select öğesine PlaceAutocompleteElement dinleyicisi ekleyin:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
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

Tam kod örneğine bakın

Önceki örnekte, etkinlik işleyici Place sınıfı nesnesi döndürür. Uygulamanız için gereken Yer Ayrıntıları veri alanlarını almak üzere place.fetchFields()'ı arayın.

Bir sonraki örnekteki dinleyici, yer bilgisi isteğinde bulunuyor ve bu bilgiyi haritada gösteriyor.

TypeScript

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

    // 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);
    }

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

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

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // 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);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});
index.js

Tam kod örneğine bakın

Örnek haritalar

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

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 initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.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-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    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);
    });
}
initMap();
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>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>

        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </body>
</html>
index.html

Örneği deneyin

Otomatik tamamlama haritası

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

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

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

    infoWindow = new google.maps.InfoWindow({});

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

      // 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);
      }

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      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,
    });
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // 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);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        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,
    });
}
initMap();
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: large;
    font-weight: bold;
}

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>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</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">
                <p>Search for a place here:</p>
                <gmp-place-autocomplete></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>
index.html

Örneği deneyin

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.
  • Başlangıçtan itibaren temel Otomatik Tamamlama (Yeni) veri alanlarını anlayın.
  • Konum tercihi ve konum kısıtlama alanları isteğe bağlıdır ancak otomatik tamamlama performansını önemli ölçüde etkileyebilir.
  • 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ığı durumları yönettiğinden ve kullanıcılara devam etme olanağı sunduğundan emin olun.

Maliyet optimizasyonu ile ilgili en iyi uygulamalar

Temel maliyet optimizasyonu

Otomatik Tamamlama (Yeni) hizmetinin kullanım maliyetini optimize etmek için Yer Ayrıntıları (Yeni) ve Otomatik Tamamlama (Yeni) widget'larında alan maskeleri kullanarak yalnızca ihtiyacınız olan Otomatik Tamamlama (Yeni) veri alanlarını döndürün.

Gelişmiş maliyet optimizasyonu

SKU: Otomatik Tamamlama İsteği fiyatlandırması'na erişmek için Otomatik Tamamlama (Yeni) özelliğini programatik olarak uygulayabilir ve Yer Ayrıntıları (Yeni) yerine seçilen yerle ilgili Coğrafi Kodlama API sonuçları isteyebilirsiniz. Aşağıdaki koşulların her ikisi de karşılanıyorsa Geocoding API ile birlikte kullanılan istek başına fiyatlandırma, oturum başına (oturum tabanlı) fiyatlandırmaya kıyasla daha uygun maliyetlidir:

  • Yalnızca kullanıcının seçtiği yerin enlemi/boylamı veya adresi gerekiyorsa Geocoding API, bu bilgileri Place Details (New) çağrısından daha az 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 kıyasla daha uygun maliyetli olabilir.
İhtiyaçlarınıza uygun otomatik tamamlama (yeni) uygulamasını seçme konusunda yardım almak için aşağıdaki soruya verdiğiniz yanıta karşılık gelen sekmeyi seçin.

Uygulamanız, seçilen tahminin adresi ve enlem/boylamı dışında herhangi bir 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 açılış saatleri gibi Yer Ayrıntıları (Yeni) gerektiğinden, Otomatik Tamamlama (Yeni) özelliğini uygularken bir oturum jetonu (programatik olarak veya JavaScript, Android ya da iOS widget'larına yerleştirilmiş) oturum başına ve talep ettiğiniz yer verileri alanlarına bağlı olarak geçerli Yerler SKU'ları kullanmanız gerekir.1

Widget uygulaması
Oturum yönetimi, otomatik olarak JavaScript, Android, veya iOS widget'larına yerleştirilmiştir. Buna, seçilen tahmindeki 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. Autocomplete (New) data fields you need.

Programatik uygulama
Otomatik Tamamlama (Yeni) isteklerinizle birlikte 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 fields parametresi, Otomatik Tamamlama (Yeni) veri alanlarını belirtir.

Hayır, yalnızca adres ve konum gerekiyor

Autocomplete (Yeni) kullanımınızın performansına bağlı olarak, Geocoding API, uygulamanız için Yer Ayrıntıları (Yeni) özelliğinden daha uygun maliyetli bir seçenek olabilir. Her uygulamanın Otomatik Tamamlama (Yeni) verimliliği, kullanıcıların ne girdiğine, uygulamanın nerede kullanıldığına ve performans optimizasyonuyla ilgili en iyi uygulamaların uygulanıp uygulanmadığına bağlı olarak değişir.

Aşağıdaki soruyu yanıtlamak için bir kullanıcının uygulamanızda bir otomatik tamamlama (yeni) tahmini 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

Oturum jetonları olmadan Otomatik Tamamlama (Yeni) programatik olarak uygulayın ve seçilen yer tahmini için Coğrafi Kodlama API'sini ç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ı yapmak, oturum başına Otomatik Tamamlama (Yeni) oturum başına maliyetinden daha düşüktür.1

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

Hayır

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

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
Otomatik Tamamlama (Yeni) isteklerinizle birlikte 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. Adres ve geometri gibi alanları belirten fields parametresi

Otomatik Tamamlama (Yeni) isteklerini geciktirmeyi düşünün
Uygulamanızın daha az istekte bulunması için kullanıcının ilk üç veya dört karakteri yazmasını bekleyerek Otomatik Tamamlama (Yeni) isteğini geciktirme gibi stratejiler kullanabilirsiniz. Örneğin, kullanıcı üçüncü karakteri yazdıktan sonra her karakter için otomatik tamamlama (yeni) isteğinde bulunmak, kullanıcının yedi karakter yazıp bir tahmin seçmesi durumunda (bu tahmin için bir Coğrafi Kodlama API isteğinde bulunursunuz) toplam maliyetin 4 Otomatik Tamamlama (Yeni) İsteği + Coğrafi Kodlama olacağı anlamına gelir.1

İstekleri geciktirmek, ortalama programatik istek sayınızı dörtten aşağıya düşürebiliyorsa Geocoding API ile yüksek performanslı otomatik tamamlama (yeni) uygulamasıyla ilgili yönergeleri uygulayabilirsiniz. İsteklerin geciktirilmesinin, her yeni tuş vuruşunda tahmin görmeyi bekleyen kullanıcı tarafından gecikme olarak algılanabileceğini unutmayın.

Kullanıcılarınızın aradığı tahmini daha az karakterle almasına yardımcı olmak için performansla ilgili en iyi uygulamaları kullanabilirsiniz.

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

Performansla ilgili en iyi uygulamalar

Aşağıdaki yönergelerde, otomatik tamamlama (yeni) performansını optimize etmenin yolları açıklanmaktadır:

  • Otomatik Tamamlama (Yeni) uygulamanıza ülke kısıtlamaları, konum önyargısı ve (programatik uygulamalar için) dil tercihi ekleyin. Dil tercihi, kullanıcının tarayıcısından veya mobil cihazından dil tercihlerini aldıkları için widget'larda gerekli değildir.
  • Otomatik Tamamlama (Yeni) özelliğine harita eşlik ediyorsa harita görüntü alanına göre konumu önyargılı hale getirebilirsiniz.
  • Kullanıcının, genellikle bu tahminlerden hiçbiri istenen sonuç adresi olmadığı için Otomatik Tamamlama (Yeni) tahminlerinden birini seçmediği durumlarda, daha alakalı sonuçlar elde etmek için orijinal kullanıcı girişini yeniden kullanabilirsiniz:
    • Kullanıcının yalnızca adres bilgisi gireceğini düşünüyorsanız Coğrafi Kodlama API'sine yapılan bir çağrıda orijinal kullanıcı girişini yeniden kullanın.
    • Kullanıcının belirli bir yerle ilgili sorguları ada veya adrese göre girmesini bekliyorsanız Yer Ayrıntıları (Yeni) isteğini kullanın. Sonuçların yalnızca belirli bir bölgede beklenmesi durumunda konum önyargısı kullanın.
    Geocoding API'ye geri dönmenin en iyi 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, "Stroupežnického 3191/17, Praha" Çekçe adresi, otomatik tamamlama (yeni) özelliğinde kısmi bir tahminle sonuçlanır.
    • New York'ta "23-30 29th St, Queens" veya Hawaii'deki Kauai adasında "47-380 Kamehameha Hwy, Kaneohe" gibi yol segmenti ön ekleri içeren adresleri giren kullanıcılar.

Konum önyargısı

location parametresi ve 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 etmesini bildirir. Tanımlanan alanın dışındaki sonuçlar gösterilmeye devam edebilir. Sonuçları yalnızca belirtilen bir ülke içindeki yerleri gösterecek şekilde filtrelemek için components parametresini kullanabilirsiniz.

Konum kısıtlama

locationRestriction parametresi ileterek sonuçları belirli bir alanla sınırlayın.

Ayrıca, location ve radius parametresiyle tanımlanan bölgeyle sonuçları kısıtlamak için locationRestriction parametresini ekleyebilirsiniz. Bu, Otomatik Tamamlama (Yeni) özelliğine yalnızca bu bölgedeki sonuçları döndürmesi talimatını verir.