Place Autocomplete
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Avrupa Ekonomik Alanı (AEA) geliştiricileri
Not: Sunucu tarafı
kitaplıkları
Bu sayfada, Maps JavaScript API ile kullanılabilen istemci taraflı kitaplığı açıklanmaktadır. Sunucunuzda Places API web hizmetiyle çalışmak istiyorsanız Google Haritalar Hizmetleri için Node.js İstemcisi'ne göz atın. Bu bağlantıdaki sayfada, Google Haritalar Hizmetleri için Java İstemcisi, Python İstemcisi ve Go İstemcisi de tanıtılmaktadır.
Giriş
Otomatik tamamlama, Maps JavaScript API'deki Yerler kitaplığının bir özelliğidir. Uygulamalarınıza Google Haritalar arama alanının türüne göre arama davranışını kazandırmak için otomatik tamamlama özelliğini kullanabilirsiniz.
Otomatik tamamlama hizmeti, tam kelimeler ve alt dizelerle eşleşebilir, yer adlarını, adresleri ve Plus Code'ları çözebilir. Bu nedenle uygulamalar, kullanıcı yazarken anında yer tahminleri sağlamak için sorgu gönderebilir. Places API'de tanımlandığı şekliyle "yer"; bir kuruluş, coğrafi konum veya önemli bir ilgi alanı olabilir.
Başlarken
Maps JavaScript API'deki Yerler kitaplığını kullanmadan önce, Google Cloud Console'da Yerler API'nin Maps JavaScript API için ayarladığınız projede etkinleştirildiğini doğrulayın.
Proje seç düğmesini tıklayın, ardından Maps JavaScript API için ayarladığınız projeyi seçip Aç'ı tıklayın.
Kontrol panelindeki API listesinde Places API'yi bulun.
Listede API'yi görüyorsanız hazırsınız demektir. Ancak bu proje eski durumdadır.
Eski aşama ve eski hizmetlerden daha yeni hizmetlere geçiş hakkında daha fazla bilgi için Eski ürünler ve özellikler başlıklı makaleyi inceleyin.
Places API (Yeni) üzerinde henüz GA ürünü olarak kullanılamayan Autocomplete ve SearchBox widget'ları için istisna uygulanır.
Kitaplığı yükleme
Yer hizmeti, ana Maps JavaScript API kodundan ayrı, bağımsız bir kitaplıktır. Bu kitaplıkta yer alan özellikleri kullanmak için öncelikle Maps API bootstrap URL'sindeki libraries parametresini kullanarak yüklemeniz gerekir:
API, sırasıyla Autocomplete ve SearchBox sınıflarını kullanarak ekleyebileceğiniz iki tür otomatik tamamlama widget'ı sunar.
Ayrıca, otomatik tamamlama sonuçlarını programatik olarak almak için AutocompleteService sınıfını kullanabilirsiniz (bkz. Maps JavaScript API Referansı: AutocompleteService sınıfı).
Mevcut sınıfların özeti aşağıda verilmiştir:
Autocomplete web sayfanıza bir metin girişi alanı ekler
ve bu alana girilen karakterleri izler. Kullanıcı metin girerken otomatik tamamlama, açılır liste şeklinde yer tahminleri döndürür. Kullanıcı listeden bir yer seçtiğinde, yerle ilgili bilgiler otomatik tamamlama nesnesine döndürülür ve uygulamanız tarafından alınabilir. Ayrıntıları aşağıda bulabilirsiniz.
Şekil 1: Otomatik tamamlama metin alanı ve seçim listesiŞekil 2: Doldurulmuş adres formu
SearchBox, Autocomplete ile benzer şekilde web sayfanıza bir metin giriş alanı ekler. Farklar şunlardır:
Buradaki temel fark, seçim listesinde gösterilen sonuçlardır. SearchBox, yerleri (Places API tarafından tanımlandığı şekilde) ve önerilen arama terimlerini içerebilen genişletilmiş bir tahmin listesi sağlar. Örneğin, kullanıcı "yeni pizzalar" yazdığında seçim listesinde "New York, NY'taki pizzalar" ifadesinin yanı sıra çeşitli pizza restoranlarının adları da yer alabilir.
SearchBox, aramayı kısıtlamak için Autocomplete'e kıyasla daha az seçenek sunar. İlkinde, aramayı belirli bir LatLngBounds'a doğru yönlendirebilirsiniz. İkincisinde ise aramayı belirli bir ülke ve belirli yer türleriyle kısıtlayabilir, ayrıca sınırları ayarlayabilirsiniz. Daha fazla bilgi için aşağıya bakın.
Şekil 3: Bir SearchBox, arama terimlerini ve yer tahminlerini gösteriyor.
Ayrıntıları aşağıda bulabilirsiniz.
Tahminleri programatik olarak almak için bir AutocompleteService nesnesi oluşturabilirsiniz. Eşleşen yerleri almak için getPlacePredictions()'ü, eşleşen yerleri ve önerilen arama terimlerini almak için getQueryPredictions()'i çağırın. Not: AutocompleteService herhangi bir kullanıcı arayüzü kontrolü eklemez. Bunun yerine, yukarıdaki yöntemler bir tahmin nesneleri dizisi döndürür. Her tahmin nesnesi, tahminin metnini, referans bilgilerini ve sonucun kullanıcı girişiyle nasıl eşleştiğine dair ayrıntıları içerir. Ayrıntıları aşağıda bulabilirsiniz.
Otomatik Tamamlama widget'ı ekleme
Autocomplete
widget'ı, web sayfanızda bir metin girişi alanı oluşturur, kullanıcı arayüzü seçim listesinde yer tahminleri sağlar ve getPlace() isteğine yanıt olarak yer ayrıntılarını döndürür. Seçim listesindeki her giriş, tek bir yere (Places API tarafından tanımlandığı şekilde) karşılık gelir.
Autocomplete oluşturucusu iki bağımsız değişken alır:
text türünde bir HTML input öğesi. Bu, otomatik tamamlama hizmetinin izleyeceği ve sonuçlarını ekleyeceği giriş alanıdır.
Aşağıdaki özellikleri içerebilen isteğe bağlı bir AutocompleteOptions bağımsız değişkeni:
Kullanıcının seçtiği PlaceResult için Place Details yanıtına eklenecek bir veri dizisi fields. Özellik ayarlanmazsa veya ['ALL'] iletilirse kullanılabilir tüm alanlar döndürülür ve ücretlendirilir (bu, üretim dağıtımları için önerilmez). Alanların listesi için PlaceResult başlıklı makaleyi inceleyin.
Desteklenen türler bölümünde listelendiği gibi, açık bir türü veya tür koleksiyonunu belirten types dizisi. Tür belirtilmezse tüm türler döndürülür.
bounds, yer aramak için kullanılacak alanı belirten bir google.maps.LatLngBounds nesnesidir. Sonuçlar bu sınırlar içinde yer alan yerlere yönelik olarak yanlıdır ancak bunlarla sınırlı değildir.
strictBounds, boolean olup API'nin yalnızca belirtilen bounds ile tanımlanan bölgenin kesin sınırları içinde kalan yerleri döndürmesi gerekip gerekmediğini belirtir. API, kullanıcı girişiyle eşleşse bile bu bölgenin dışındaki sonuçları döndürmez.
componentRestrictions, sonuçları belirli gruplarla sınırlamak için kullanılabilir. En fazla 5 ülkeye göre filtre uygulamak için componentRestrictions kullanabilirsiniz. Ülkeler, iki karakterli, ISO 3166-1 Alpha-2 uyumlu ülke kodu olarak iletilmelidir. Birden fazla ülke, ülke kodlarının listesi olarak iletilmelidir.
Not: Bir ülke koduyla beklenmedik sonuçlar alırsanız hedeflediğiniz ülkeleri, bağımlı bölgeleri ve özel coğrafi ilgi alanlarını içeren bir kod kullandığınızı doğrulayın. Kod bilgilerini Wikipedia: List of ISO 3166 country codes (Wikipedia: ISO 3166 ülke kodları listesi) veya ISO Online Browsing Platform'da (ISO Çevrimiçi Göz Atma Platformu) bulabilirsiniz.
placeIdOnly, Autocomplete widget'ına yalnızca yer kimliklerini alması talimatını vermek için kullanılabilir. getPlace(), Autocomplete nesnesi üzerinde çağrıldığında, PlaceResult yalnızca place id, types ve name özellikleri ayarlanmış olarak kullanılabilir. Döndürülen yer kimliğini Places, Geocoding, Directions veya Distance Matrix hizmetlerine yapılan çağrılarda kullanabilirsiniz.
Otomatik tamamlama tahminlerini kısıtlama
Yer Adı 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. Kullanım alanınıza göre daha alakalı tahminler sunmak için Yer Adı Otomatik Tamamlama seçeneklerini ayarlayın.
İnşaat sırasında seçenekleri ayarlama
Autocomplete oluşturucusu, widget oluşturulurken kısıtlamaları ayarlamak için AutocompleteOptions
parametresini kabul eder. Aşağıdaki örnekte bounds, componentRestrictions ve types seçenekleri, establishment türü yerler istenmesi, belirtilen coğrafi alan içindeki yerlerin tercih edilmesi ve tahminlerin yalnızca ABD'deki yerlerle sınırlandırılması için ayarlanmıştır. fields seçeneğinin ayarlanması, kullanıcının seçtiği yerle ilgili hangi bilgilerin döndürüleceğini belirtir.
Mevcut bir widget'taki seçeneğin değerini değiştirmek için setOptions() numaralı telefonu arayın.
TypeScript
constcenter={lat:50.064192,lng:-130.605469};// Create a bounding box with sides ~10km away from the center pointconstdefaultBounds={north:center.lat+0.1,south:center.lat-0.1,east:center.lng+0.1,west:center.lng-0.1,};constinput=document.getElementById("pac-input")asHTMLInputElement;constoptions={bounds:defaultBounds,componentRestrictions:{country:"us"},fields:["address_components","geometry","icon","name"],strictBounds:false,};constautocomplete=newgoogle.maps.places.Autocomplete(input,options);
constcenter={lat:50.064192,lng:-130.605469};// Create a bounding box with sides ~10km away from the center pointconstdefaultBounds={north:center.lat+0.1,south:center.lat-0.1,east:center.lng+0.1,west:center.lng-0.1,};constinput=document.getElementById("pac-input");constoptions={bounds:defaultBounds,componentRestrictions:{country:"us"},fields:["address_components","geometry","icon","name"],strictBounds:false,};constautocomplete=newgoogle.maps.places.Autocomplete(input,options);
İhtiyacınız olmayan Yer Verileri SKU'ları için faturalandırılmamak üzere veri alanlarını belirtin. Önceki örnekte gösterildiği gibi, widget oluşturucuya iletilen AutocompleteOptions öğelerine fields özelliğini ekleyin veya mevcut bir Autocomplete nesnesinde setFields() işlevini çağırın.
Sonuçları, harita görüntü alanına veya dikdörtgen sınırlara göre mevcut sınırlar ile kısıtlamak için strictBounds seçeneğini ayarlayın.
autocomplete.setOptions({strictBounds:true});
Tahminleri belirli bir ülkeyle sınırlama
Otomatik tamamlama aramasını en fazla beş ülkeden oluşan belirli bir grupla sınırlamak için componentRestrictions seçeneğini kullanın veya setComponentRestrictions() numaralı telefonu arayın.
Tahminleri belirli yer türleriyle sınırlamak için types seçeneğini kullanın veya setTypes() işlevini çağırın. Bu kısıtlama, Yer Türleri'nde listelendiği gibi bir türü veya tür koleksiyonunu belirtir.
Kısıtlama belirtilmezse tüm türler döndürülür.
types seçeneğinin değeri veya setTypes()'ye aktarılan değer için şunlardan birini belirtebilirsiniz:
Kullanıcı, otomatik tamamlama metin alanına eklenen tahminlerden bir yer seçtiğinde hizmet bir place_changed etkinliği tetikler. Yer ayrıntılarını almak için:
place_changed etkinliği için bir etkinlik işleyici oluşturun ve işleyiciyi eklemek üzere Autocomplete nesnesinde addListener() işlevini çağırın.
Seçilen yer hakkında daha fazla bilgi edinmek için kullanabileceğiniz bir PlaceResult nesnesi almak üzere Autocomplete nesnesinde Autocomplete.getPlace() işlevini çağırın.
Varsayılan olarak, bir kullanıcı bir yer seçtiğinde otomatik tamamlama, seçilen yerle ilgili tüm kullanılabilir veri alanlarını döndürür ve buna göre faturalandırılırsınız.
Hangi yer verisi alanlarının döndürüleceğini belirtmek için Autocomplete.setFields() türünü kullanın. İsteyebileceğiniz yer verileri alanlarının listesi de dahil olmak üzere PlaceResult nesnesi hakkında daha fazla bilgi edinin. İhtiyacınız olmayan veriler için ödeme yapmamak üzere, yalnızca kullanacağınız yer verilerini belirtmek için Autocomplete.setFields() simgesini kullandığınızdan emin olun.
name özelliği, Yerler Otomatik Tamamlama tahminlerinden description içerir. description hakkında daha fazla bilgiyi Yer Otomatik Tamamlama dokümanlarında bulabilirsiniz.
Adres formlarında, adresi yapılandırılmış biçimde almak yararlıdır. Seçilen yerin yapılandırılmış adresini döndürmek için Autocomplete.setFields() işlevini çağırın ve address_components alanını belirtin.
Aşağıdaki örnekte, adres formundaki alanları doldurmak için otomatik tamamlama özelliği kullanılmaktadır.
TypeScript
functionfillInAddress(){// Get the place details from the autocomplete object.constplace=autocomplete.getPlace();letaddress1="";letpostcode="";// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.// place.address_components are google.maps.GeocoderAddressComponent objects// which are documented at http://goo.gle/3l5i5Mrfor(constcomponentofplace.address_componentsasgoogle.maps.GeocoderAddressComponent[]){// @ts-ignore remove once typings fixedconstcomponentType=component.types[0];switch(componentType){case"street_number":{address1=`${component.long_name}${address1}`;break;}case"route":{address1+=component.short_name;break;}case"postal_code":{postcode=`${component.long_name}${postcode}`;break;}case"postal_code_suffix":{postcode=`${postcode}-${component.long_name}`;break;}case"locality":(document.querySelector("#locality")asHTMLInputElement).value=component.long_name;break;case"administrative_area_level_1":{(document.querySelector("#state")asHTMLInputElement).value=component.short_name;break;}case"country":(document.querySelector("#country")asHTMLInputElement).value=component.long_name;break;}}address1Field.value=address1;postalField.value=postcode;// After filling the form with address components from the Autocomplete// prediction, set cursor focus on the second address line to encourage// entry of subpremise information such as apartment, unit, or floor number.address2Field.focus();}
functionfillInAddress(){// Get the place details from the autocomplete object.constplace=autocomplete.getPlace();letaddress1="";letpostcode="";// Get each component of the address from the place details,// and then fill-in the corresponding field on the form.// place.address_components are google.maps.GeocoderAddressComponent objects// which are documented at http://goo.gle/3l5i5Mrfor(constcomponentofplace.address_components){// @ts-ignore remove once typings fixedconstcomponentType=component.types[0];switch(componentType){case"street_number":{address1=`${component.long_name}${address1}`;break;}case"route":{address1+=component.short_name;break;}case"postal_code":{postcode=`${component.long_name}${postcode}`;break;}case"postal_code_suffix":{postcode=`${postcode}-${component.long_name}`;break;}case"locality":document.querySelector("#locality").value=component.long_name;break;case"administrative_area_level_1":{document.querySelector("#state").value=component.short_name;break;}case"country":document.querySelector("#country").value=component.long_name;break;}}address1Field.value=address1;postalField.value=postcode;// After filling the form with address components from the Autocomplete// prediction, set cursor focus on the second address line to encourage// entry of subpremise information such as apartment, unit, or floor number.address2Field.focus();}window.initAutocomplete=initAutocomplete;
Varsayılan olarak, otomatik tamamlama hizmeti tarafından oluşturulan metin alanı standart yer tutucu metin içerir. Metni değiştirmek için input öğesinde placeholder özelliğini ayarlayın:
<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">
Not: Varsayılan yer tutucu metin otomatik olarak yerelleştirilir. Kendi yer tutucu değerinizi belirtirseniz bu değerin yerelleştirilmesini uygulamanızda yapmanız gerekir. Google Maps JavaScript API'nin kullanılacak dili nasıl seçtiği hakkında bilgi edinmek için
yerelleştirme ile ilgili dokümanları okuyun.
SearchBox, kullanıcıların "New York'taki pizzacılar" veya "Robson Caddesi yakınındaki ayakkabı mağazaları" gibi metin tabanlı coğrafi aramalar yapmasına olanak tanır.
SearchBox'ı bir metin alanına ekleyebilirsiniz. Metin girildikçe hizmet, açılır seçim listesi şeklinde tahminler döndürür.
SearchBox, yerleri (Places API tarafından tanımlandığı şekilde) ve önerilen arama terimlerini içerebilen genişletilmiş bir tahmin listesi sağlar. Örneğin, kullanıcı "yeni pizza" ifadesini girerse seçim listesinde "New York, NY'ta pizza" ifadesinin yanı sıra çeşitli pizza restoranlarının adları da yer alabilir. Kullanıcı listeden bir yer seçtiğinde bu yerle ilgili bilgiler SearchBox nesnesine döndürülür ve uygulamanız tarafından alınabilir.
SearchBox oluşturucusu iki bağımsız değişken alır:
text türünde bir HTML input öğesi. Bu, SearchBox hizmetinin izleyeceği ve sonuçlarını ekleyeceği giriş alanıdır.
options bağımsız değişkeni, bounds özelliğini içerebilir:
bounds, yer aramak için kullanılacak alanı belirten bir google.maps.LatLngBounds
nesnesidir. Sonuçlar bu sınırlar içinde yer alan yerlere yönelik önyargılıdır ancak bu yerlerle sınırlı değildir.
Aşağıdaki kod, sonuçları enlem/boylam koordinatları kullanılarak belirtilen belirli bir coğrafi bölgedeki yerlere doğru yönlendirmek için sınır parametresini kullanır.
Kullanıcı, arama kutusuna eklenen tahminlerden birini seçtiğinde hizmet bir places_changed etkinliği tetikler. Her biri PlaceResult nesnesi olan birkaç tahmin içeren bir dizi almak için SearchBox nesnesinde getPlaces() işlevini çağırabilirsiniz.
PlaceResult nesnesi hakkında daha fazla bilgi için
yer ayrıntısı sonuçları ile ilgili dokümanları inceleyin.
TypeScript
// Listen for the event fired when the user selects a prediction and retrieve// more details for that place.searchBox.addListener("places_changed",()=>{constplaces=searchBox.getPlaces();if(places.length==0){return;}// Clear out the old markers.markers.forEach((marker)=>{marker.setMap(null);});markers=[];// For each place, get the icon, name and location.constbounds=newgoogle.maps.LatLngBounds();places.forEach((place)=>{if(!place.geometry||!place.geometry.location){console.log("Returned place contains no geometry");return;}consticon={url:place.iconasstring,size:newgoogle.maps.Size(71,71),origin:newgoogle.maps.Point(0,0),anchor:newgoogle.maps.Point(17,34),scaledSize:newgoogle.maps.Size(25,25),};// Create a marker for each place.markers.push(newgoogle.maps.Marker({map,icon,title:place.name,position:place.geometry.location,}));if(place.geometry.viewport){// Only geocodes have viewport.bounds.union(place.geometry.viewport);}else{bounds.extend(place.geometry.location);}});map.fitBounds(bounds);});
// Listen for the event fired when the user selects a prediction and retrieve// more details for that place.searchBox.addListener("places_changed",()=>{constplaces=searchBox.getPlaces();if(places.length==0){return;}// Clear out the old markers.markers.forEach((marker)=>{marker.setMap(null);});markers=[];// For each place, get the icon, name and location.constbounds=newgoogle.maps.LatLngBounds();places.forEach((place)=>{if(!place.geometry||!place.geometry.location){console.log("Returned place contains no geometry");return;}consticon={url:place.icon,size:newgoogle.maps.Size(71,71),origin:newgoogle.maps.Point(0,0),anchor:newgoogle.maps.Point(17,34),scaledSize:newgoogle.maps.Size(25,25),};// Create a marker for each place.markers.push(newgoogle.maps.Marker({map,icon,title:place.name,position:place.geometry.location,}),);if(place.geometry.viewport){// Only geocodes have viewport.bounds.union(place.geometry.viewport);}else{bounds.extend(place.geometry.location);}});map.fitBounds(bounds);});
Yer Adı Otomatik Tamamlama Hizmeti tahminlerini programatik olarak alma
Tahminleri programatik olarak almak için AutocompleteService sınıfını kullanın. AutocompleteService
kullanıcı arayüzü kontrolü eklemez. Bunun yerine, her biri tahmin metnini, referans bilgilerini ve sonucun kullanıcı girişiyle nasıl eşleştiğine dair ayrıntıları içeren bir tahmin nesneleri dizisi döndürür.
Bu, yukarıda açıklanan Autocomplete ve SearchBox tarafından sunulan kullanıcı arayüzü üzerinde daha fazla kontrol sahibi olmak istediğiniz durumlarda faydalıdır.
AutocompleteService aşağıdaki yöntemleri kullanıma sunar:
getPlacePredictions(), yer tahminleri döndürür.
Not: Places API'de tanımlandığı şekilde bir "yer" kuruluş, coğrafi konum veya önemli bir
önemli yer olabilir.
getQueryPredictions(), yerler (Places API tarafından tanımlandığı şekilde) ve önerilen arama terimlerini içerebilen genişletilmiş bir tahmin listesi döndürür. Örneğin, kullanıcı "yeni pizza" yazdığında seçim listesinde "New York, NY'ta pizza" ifadesinin yanı sıra çeşitli pizza restoranlarının adları da yer alabilir.
Yukarıdaki yöntemlerin her ikisi de aşağıdaki biçimde bir tahmin
nesneleri dizisi döndürür:
Eşleşen tahmin: description
distance_meters, yerin belirtilen AutocompletionRequest.origin'ye olan mesafesini metre cinsinden ifade eder.
matched_substrings, açıklamada kullanıcının girişindeki öğelerle eşleşen bir dizi alt dize içeriyor. Bu, uygulamanızdaki alt dizeleri vurgulamak için kullanışlıdır. Çoğu durumda, sorgu açıklama alanının alt dizesi olarak görünür.
length, alt dizenin uzunluğudur.
offset, açıklama dizesinin başlangıcından itibaren ölçülen ve eşleşen alt dizenin göründüğü karakter ofsetidir.
terms, sorgu öğelerini içeren bir dizidir. Bir yer için her öğe genellikle adresin bir bölümünü oluşturur.
offset, açıklama dizesinin başlangıcından itibaren ölçülen ve eşleşen alt dizenin göründüğü karakter ofsetidir.
Eşleşen terim: value
Aşağıdaki örnekte, "yakınımda pizza" ifadesi için bir sorgu tahmini isteği yürütülür ve sonuç bir listede gösterilir.
TypeScript
// This example retrieves autocomplete predictions programmatically from the// autocomplete service, and displays them as an HTML list.// This example requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitService():void{constdisplaySuggestions=function(predictions:google.maps.places.QueryAutocompletePrediction[]|null,status:google.maps.places.PlacesServiceStatus){if(status!=google.maps.places.PlacesServiceStatus.OK||!predictions){alert(status);return;}predictions.forEach((prediction)=>{constli=document.createElement("li");li.appendChild(document.createTextNode(prediction.description));(document.getElementById("results")asHTMLUListElement).appendChild(li);});};constservice=newgoogle.maps.places.AutocompleteService();service.getQueryPredictions({input:"pizza near Syd"},displaySuggestions);}declareglobal{interfaceWindow{initService:()=>void;}}window.initService=initService;
// This example retrieves autocomplete predictions programmatically from the// autocomplete service, and displays them as an HTML list.// This example requires the Places library. Include the libraries=places// parameter when you first load the API. For example:// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">functioninitService(){constdisplaySuggestions=function(predictions,status){if(status!=google.maps.places.PlacesServiceStatus.OK||!predictions){alert(status);return;}predictions.forEach((prediction)=>{constli=document.createElement("li");li.appendChild(document.createTextNode(prediction.description));document.getElementById("results").appendChild(li);});};constservice=newgoogle.maps.places.AutocompleteService();service.getQueryPredictions({input:"pizza near Syd"},displaySuggestions);}window.initService=initService;
<html>
<head>
<title>Retrieving Autocomplete Predictions</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<p>Query suggestions for 'pizza near Syd':</p>
<ul id="results"></ul>
<!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
<img
class="powered-by-google"
src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
alt="Powered by Google"
/>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
defer
></script>
</body>
</html>
AutocompleteService.getPlacePredictions()
Faturalandırma amacıyla otomatik tamamlama isteklerini gruplandırmak için oturum jetonlarını (uygulanmışsa) kullanabilir. Oturum jetonları, faturalandırma amacıyla kullanıcı otomatik tamamlama aramasının sorgu ve seçim aşamalarını ayrı bir oturumda gruplandırır. Oturum, kullanıcının sorgu yazmaya başlamasıyla başlar ve bir yer seçmesiyle sona erer. Her oturumda birden fazla sorgu ve ardından bir yer seçimi olabilir.
Bir oturum sona erdiğinde jeton geçerliliğini kaybeder. Uygulamanız her oturum için yeni bir jeton oluşturmalıdır. Tüm otomatik tamamlama oturumları için oturum jetonları kullanmanızı öneririz. sessionToken parametresi atlanırsa veya bir oturum jetonunu yeniden kullanırsanız oturum, oturum jetonu sağlanmamış gibi ücretlendirilir (her istek ayrı olarak faturalandırılır).
AutocompleteService.getPlacePredictions() çağrısından elde edilen yerle ilgili tek bir Yer Ayrıntıları isteğinde bulunmak için aynı oturum jetonunu kullanabilirsiniz.
Bu durumda, otomatik tamamlama isteği Yer Ayrıntıları isteğiyle birleştirilir ve çağrı, normal bir Yer Ayrıntıları isteği olarak ücretlendirilir. Otomatik tamamlama isteği ücretsizdir.
Her yeni oturum için benzersiz bir oturum jetonu ilettiğinizden emin olun. Aynı jetonu birden fazla Otomatik Tamamlama oturumunda kullanmak bu Otomatik Tamamlama oturumlarını geçersiz kılar ve geçersiz oturumlardaki tüm Otomatik Tamamlama istekleri İstek Başına Otomatik Tamamlama SKU'su kullanılarak ayrı ayrı ücretlendirilir. Oturum jetonları hakkında daha fazla bilgi edinin.
Aşağıdaki örnekte, oturum jetonu oluşturma ve ardından bunu AutocompleteService içinde iletme gösterilmektedir (displaySuggestions() işlevi, kısa olması için çıkarılmıştır):
// Create a new session token.varsessionToken=newgoogle.maps.places.AutocompleteSessionToken();// Pass the token to the autocomplete service.varautocompleteService=newgoogle.maps.places.AutocompleteService();autocompleteService.getPlacePredictions({input:'pizza near Syd',sessionToken:sessionToken},displaySuggestions);
Her yeni oturum için benzersiz bir oturum jetonu ilettiğinizden emin olun. Aynı jetonun birden fazla oturumda kullanılması, her isteğin ayrı ayrı faturalandırılmasına neden olur.
Otomatik Tamamlama ve Arama Kutusu widget'larının stilini belirleme
Autocomplete ve SearchBox tarafından sağlanan kullanıcı arayüzü öğeleri, varsayılan olarak bir Google Haritası'na dahil edilecek şekilde stillendirilir. Stili kendi sitenize uyacak şekilde ayarlamak isteyebilirsiniz. Aşağıdaki CSS sınıfları kullanılabilir. Aşağıda listelenen tüm sınıflar hem Autocomplete hem de SearchBox widget'ları için geçerlidir.
Otomatik Tamamlama ve SearchBox widget'ları için CSS sınıfları
CSS sınıfı
Açıklama
pac-container
Yer Adı Otomatik Tamamlama hizmeti tarafından döndürülen tahminlerin listesini içeren görsel öğe. Bu liste, Autocomplete veya SearchBox widget'ının altında açılır liste olarak görünür.
pac-icon
Tahminler listesindeki her öğenin solunda gösterilen simge.
pac-item
Autocomplete veya SearchBox widget'ı tarafından sağlanan tahminler listesindeki bir öğe.
pac-item:hover
Kullanıcı fare işaretçisini öğenin üzerine getirdiğinde öğe.
pac-item-selected
Kullanıcı klavyeyi kullanarak seçtiğinde öğe. Not: Seçilen öğeler hem bu sınıfın hem de pac-item sınıfının üyesi olur.
pac-item-query
pac-item içinde, tahminin ana bölümünü oluşturan bir aralık. Coğrafi konumlar için bu, "Sydney" gibi bir yer adı veya "10 King Street" gibi bir sokak adı ve numarası içerir. "New York'ta pizza" gibi metin tabanlı aramalar için sorgunun tam metnini içerir. Varsayılan olarak pac-item-query siyah renklidir. pac-item içinde başka bir metin varsa bu metin pac-item-query dışında yer alır ve stilini pac-item öğesinden alır. Varsayılan olarak gri renktedir. Ek metin genellikle bir adrestir.
pac-matched
Döndürülen tahminde kullanıcının girişiyle eşleşen kısım. Varsayılan olarak, bu eşleşen metin kalın metinle vurgulanır. Eşleşen metnin pac-item içinde herhangi bir yerde olabileceğini unutmayın. pac-item-query'nın bir parçası olması gerekmez ve kısmen pac-item-query'da, kısmen de pac-item'daki kalan metinde yer alabilir.
Yer Adı Otomatik Tamamlama (Eski) optimizasyonu
Bu bölümde, Yer Adı Otomatik Tamamlama (Eski) hizmetinden en iyi şekilde yararlanmanıza yardımcı olacak en iyi uygulamalar açıklanmaktadır.
Başlangıçtan itibaren temel Yer Adı Otomatik Tamamlama (Eski) veri alanlarını 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 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
Yer Adı Otomatik Tamamlama (Eski) hizmetinin kullanım maliyetini optimize etmek için Yer Ayrıntıları (Eski) ve Yer Adı Otomatik Tamamlama (Eski) widget'larında alan maskeleri kullanarak yalnızca ihtiyacınız olan Yer Adı Otomatik Tamamlama (Eski) veri alanlarını döndürün.
Gelişmiş maliyet optimizasyonu
SKU: Otomatik Tamamlama - İstek Başına fiyatlandırma seçeneğine erişmek için Yer Adı Otomatik Tamamlama (Eski) özelliğini programatik olarak uygulayabilir ve Yer Ayrıntıları (Eski) yerine seçilen yerle ilgili Geocoding 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 Yer Ayrıntıları (Eski) çağrısından daha düşük bir maliyetle sağlar.
Kullanıcılar, ortalama dört veya daha az Yer Adı Otomatik Tamamlama (Eski) 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 Yer Adı Otomatik Tamamlama (eski) 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?
Aşağıdaki yönergelerde, Yer Adı Otomatik Tamamlama (Eski) performansını optimize etmenin yolları açıklanmaktadır:
Yer Adı Otomatik Tamamlama (Eski) uygulamanıza ülkeye özgü kısıtlamalar, konum önyargısı ve (programatik uygulamalar için) dil tercihleri ekleyin. Dil tercihi, kullanıcının tarayıcısından veya mobil cihazından dil tercihlerini alan widget'larda gerekli değildir.
Yer Adı Otomatik Tamamlama (Eski) özelliğine harita eşlik ediyorsa konumu harita görüntü alanına göre yönlendirebilirsiniz.
Kullanıcının Yer Adı Otomatik Tamamlama (Eski) tahminlerinden birini seçmediği durumlarda (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 gireceğini düşünüyorsanız Geocoding 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ı (Eski) isteği kullanın. Sonuçların yalnızca belirli bir bölgede beklenmesi durumunda konum önyargısı özelliğini 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 adresleri giriyor. Örneğin, "Stroupežnického 3191/17, Praha" Çek adresi, Yer Adı Otomatik Tamamlama (Eski) özelliğinde kısmi bir tahmin oluşturur.
New York City'de "23-30 29th St, Queens" veya Hawai'i'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, Yer Adı Otomatik Tamamlama (Eski) özelliğine tanımlanan alan içindeki sonuçları göstermeyi tercih etmesi talimatını verir. Tanımlanan alanın dışındaki sonuçlar yine de gösterilebilir. Sonuçları yalnızca belirli bir ülke içindeki yerleri gösterecek şekilde filtrelemek için includedRegionCodes parametresini kullanabilirsiniz.
Konum kısıtlama
locationRestriction parametresini 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 strictbounds parametresini ekleyebilirsiniz. Bu, Yer Adı Otomatik Tamamlama (Eski) özelliğine yalnızca bu bölgedeki sonuçları döndürme talimatı verir.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2026-06-15 UTC."],[],[]]
