Geliştirilmiş Yer Otomatik Tamamlama özelliğinin önizleme sürümüne hoş geldiniz. Otomatik tamamlama, Maps JavaScript API'deki Yerler kitaplığının bir özelliğidir. Uygulamalarınıza Google Haritalar arama alanının önceden yazma davranışını vermek için otomatik tamamlama özelliğini kullanabilirsiniz. Otomatik tamamlama hizmeti; yer adları, adresler ve artı kodları çözümlenerek tam kelimeler ve alt dizelerle eşleşebilir. Bu sayede uygulamalar, kullanıcı yazarken yer hakkında tahminlerde bulunmak için sorgu gönderebilir.
Ön koşullar
Otomatik Yer Tamamlama (Önizleme) özelliğini kullanmak için Google Cloud projenizde "Places API"yi etkinleştirmeniz ve önyükleme yükleyicinizde beta kanalını (v: "beta") belirtmeniz gerekir. Ayrıntılar için Başlarken bölümüne bakın.
Yenilikler
Yer Otomatik Tamamlama (Önizleme) aşağıdaki şekillerde iyileştirilmiştir:
- Otomatik Tamamlama widget kullanıcı arayüzü, metin girişi yer tutucusu, tahmin listesi logosu ve yer tahminleri için bölgesel yerelleştirmeyi (RTL dilleri dahil) destekler.
- Ekran okuyucular ve klavye etkileşimi desteği 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
Bir web sayfasına veya Google haritasına Otomatik Tamamlama widget'ı ekleyebilirsiniz. Otomatik Tamamlama widget'ı bir metin giriş alanı oluşturur, bir kullanıcı arayüzü seçme listesine yer tahminleri sağlar ve gmp-placeselect işleyicisi aracılığıyla bir kullanıcı tıklamasına yanıt olarak yer ayrıntılarını döndürür. Bu bölümde, bir web sayfasına veya Google haritasına 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şturup aşağıdaki örnekte gösterildiği gibi bu widget'ı sayfaya ekleyin:
TypeScript
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
JavaScript
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
Kod örneğinin tamamını inceleyin
Haritaya Otomatik Tamamlama widget'ı ekleme
Bir haritaya 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, özel kontrol olarak haritaya aktarın:
TypeScript
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
JavaScript
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";
const card = document.getElementById("place-autocomplete-card");
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
Kod örneğinin tamamını inceleyin
Otomatik Tamamlama tahminlerini sınırla
Otomatik Yer Tamamlama, varsayılan olarak kullanıcının konumuna yakın tahminler için eğilimli olarak tüm yer türlerini sunar ve kullanıcının seçtiği yer için kullanılabilir tüm veri alanlarını getirir. Sonuçları kısıtlayarak veya sonuçlara ağırlık vererek daha alakalı tahminler sunmak için Yer Otomatik Tamamlama seçeneklerini ayarlayın.
Sonuçları kısıtlamak, Otomatik Tamamlama widget'ının kısıtlama alanının dışında kalan sonuçları yoksaymasına neden olur. Sonuçların harita sınırlarıyla sınırlandırılması sık başvurulan bir uygulamadır. Sonuçlara ağırlık verme 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 da olabilir.
Yer aramayı ülkeye göre kısıtlama
Yer aramasını bir veya daha fazla belirli ülkeyle kısıtlamak için ülke kodlarını belirtmek üzere aşağıdaki snippet'te gösterildiği gibi componentRestrictions özelliğini kullanın:
const pac = new google.maps.places.PlaceAutocompleteElement({
componentRestrictions: {country: ['us', 'au']},
});
Yer aramayı harita sınırlarıyla sınırlama
Yer aramasını haritanın sınırlarıyla kısıtlamak için sınırları eklemek üzere aşağıdaki snippet'te gösterildiği gibi locationRestrictions özelliğini kullanın:
const pac = new google.maps.places.PlaceAutocompleteElement({
locationRestriction: map.getBounds(),
});
Harita sınırlarıyla kısıtlarken sınırları değiştirildiğinde güncellemek için bir işleyici eklediğinizden emin olun:
map.addListener('bounds_changed', () => {
autocomplete.locationRestriction = map.getBounds();
});
locationRestriction öğesini kaldırmak için null olarak ayarlayın.
Taraflı yer arama sonuçları
Önyargı, aşağıda gösterildiği gibi locationBias özelliğini kullanarak ve yarıçapı geçerek arama sonuçlarını bir çember alanına yerleştirir:
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 kısıtlama
Burada gösterildiği gibi types özelliğini kullanarak ve bir veya daha fazla tür belirterek yer arama sonuçlarını belirli yer türleriyle sınırlandırın:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({
types: ['establishment'],
});
Desteklenen türlerin tam listesi için Tablo 3: Yerinde otomatik tamamlama isteklerinde desteklenen türler bölümüne bakın.
Yer ayrıntılarını alın
Seçilen yerle ilgili yer ayrıntılarını almak için aşağıdaki örnekte gösterildiği gibi PlaceAutocompleteElement öğesine bir gmp-place-select işleyicisi ekleyin:
TypeScript
// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
selectedPlaceTitle.textContent = 'Selected Place:';
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(), /* replacer */ null, /* space */ 2);
});
JavaScript
// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
selectedPlaceTitle.textContent = "Selected Place:";
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(),
/* replacer */ null,
/* space */ 2,
);
});
Kod örneğinin tamamını inceleyin
Yukarıdaki örnekte, etkinlik işleyici Place class (Yer sınıfı) nesnesini döndürür.
Uygulamanız için gereken Yer Ayrıntıları veri alanlarını almak üzere place.fetchFields() numaralı telefonu arayın.
Bir sonraki örnekte yer alan dinleyici, yer bilgilerini ister ve harita üzerinde gösterir.
TypeScript
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content = '<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
'<span id="place-address">' + place.formattedAddress + '</span>' +
'</div>';
updateInfoWindow(content, place.location);
marker.position = place.location;
});
JavaScript
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content =
'<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' +
place.displayName +
"</span><br />" +
'<span id="place-address">' +
place.formattedAddress +
"</span>" +
"</div>";
updateInfoWindow(content, place.location);
marker.position = place.location;
});
Kod örneğinin tamamını inceleyin
Seçili yer için coğrafi kodlama sonuçlarını alın
Seçili yerin coğrafi kodlama sonuçlarını almak amacıyla konumu almak için aşağıdaki snippet'te gösterildiği gibi google.maps.Geocoder kodunu kullanın:
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.064192, lng: -130.605469},
zoom: 3,
});
const marker = new google.maps.Marker({map});
const autocomplete = new google.maps.places.PlaceAutocompleteElement();
const geocoder = new google.maps.Geocoder();
autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
const results = await geocoder.geocode({place.id});
marker.setPlace({
placeId: place.id,
location: results[0].geometry.location,
});
});
Örnek haritalar
Bu bölümde, bu sayfada yer alan örnek haritalara ait kodun tamamı bulunmaktadır.
Otomatik tamamlama öğesi
Bu örnek, bir web sayfasına Otomatik Tamamlama widget'ı eklemekte ve seçilen her yere ait sonuçları göstermektedir.
TypeScript
async function initMap(): Promise<void> {
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
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.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
selectedPlaceTitle.textContent = 'Selected Place:';
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(), /* replacer */ null, /* space */ 2);
});
}
initMap();
JavaScript
async function initMap() {
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
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.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
selectedPlaceTitle.textContent = "Selected Place:";
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(),
/* replacer */ null,
/* space */ 2,
);
});
}
initMap();
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;
}
HTML
<html>
<head>
<title>Place Autocomplete element</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
Örneği Deneyin
Haritayı otomatik tamamla
Bu örnekte, bir Google haritasına Otomatik Tamamlama widget'ının nasıl ekleneceği gösterilmektedir.
TypeScript
let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
// Request needed libraries.
//@ts-ignore
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary("marker"),
google.maps.importLibrary("places")
]);
// Initialize the map.
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapId: '4504f8b37365c3d0',
mapTypeControl: false,
});
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
// Create the marker and infowindow
marker = new google.maps.marker.AdvancedMarkerElement({
map,
});
infoWindow = new google.maps.InfoWindow({});
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content = '<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
'<span id="place-address">' + place.formattedAddress + '</span>' +
'</div>';
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,
anchor: marker,
shouldFocus: false,
});
}
initMap();
JavaScript
let map;
let marker;
let infoWindow;
async function initMap() {
// Request needed libraries.
//@ts-ignore
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary("marker"),
google.maps.importLibrary("places"),
]);
// Initialize the map.
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapId: "4504f8b37365c3d0",
mapTypeControl: false,
});
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";
const card = document.getElementById("place-autocomplete-card");
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
// Create the marker and infowindow
marker = new google.maps.marker.AdvancedMarkerElement({
map,
});
infoWindow = new google.maps.InfoWindow({});
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content =
'<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' +
place.displayName +
"</span><br />" +
'<span id="place-address">' +
place.formattedAddress +
"</span>" +
"</div>";
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,
anchor: marker,
shouldFocus: false,
});
}
initMap();
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;
}
#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;
}
HTML
<html>
<head>
<title>Place Autocomplete map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div class="place-autocomplete-card" id="place-autocomplete-card">
<p>Search for a place here:</p>
</div>
<div id="map"></div>
<!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
Örneği Deneyin
Yer Seçici bileşenini kullanma
Not: Bu örnekte açık kaynak kitaplık kullanılmaktadır. Kitaplıkla ilgili destek ve geri bildirim için BENİOKU sayfasına göz atın.
Web bileşenlerini kullanarak, yer otomatik tamamlama özelliğini yalnızca birkaç satır kodla görüntüleyin.
Web bileşenleri nedir?
Web bileşenleri, web uygulamanızın HTML'sinin herhangi bir yerinde kullanılabilen özel, yeniden kullanılabilir, kapsüllenmiş HTML etiketleri oluşturmanıza olanak tanır. Bu bileşenler tüm modern tarayıcılarda desteklenir ve kullanıcı arayüzü ile işlevleri kapsamak için çerçeveden bağımsız bir mekanizma sunar.
Yer Seçici bileşeni nedir?
Yer seçici bileşeni, son kullanıcıların otomatik tamamlama özelliğini kullanarak belirli bir adresi veya yeri aramasına olanak tanıyan bir metin girişidir.
Genişletilmiş Bileşen Kitaplığı nedir?
Google Haritalar Platformu'nun Genişletilmiş Bileşen Kitaplığı, geliştiricilerin daha iyi haritaları ve konum özelliklerini daha hızlı ve daha az çabayla oluşturmalarına yardımcı olan bir dizi Web Bileşeni'dir. Standart kodu, en iyi uygulamaları ve duyarlı tasarımı kapsayarak karmaşık harita arayüzlerini tek bir HTML öğesine dönüştürür. Sonuç olarak bu bileşenler, haritaları ve konumla ilgili kodları okumayı, öğrenmeyi, özelleştirmeyi ve bakımını yapmayı kolaylaştırır.
Başlayın
Başlamak için Genişletilmiş Bileşen kitaplığını npm ile yükleyin.
En iyi performans için bir paket yöneticisi kullanın ve yalnızca ihtiyacınız olan bileşenleri içe aktarın. Bu paket, npm'de @googlemaps/extended-component-library olarak listelenir. Şununla yükleyin:
npm i @googlemaps/extended-component-library;
Ardından, uygulamanızda kullandığınız bileşenleri içe aktarın.
import '@googlemaps/extended-component-library/place_picker.js';
npm kitaplığını yükledikten sonra Cloud Console'dan bir API anahtarı alın.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>
Yer seçici bileşen etiketini kullanın.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%"> </gmpx-place-picker>
Daha fazla bilgi için GitHub veya npm adresine göz atın. Örnek kodda kullanılan bileşenleri görmek için GitHub'daki örnekler sayfasına göz atın.