Place Autocomplete

Giriş

Otomatik tamamlama, Rehber kitaplığının bir özelliğidir. Maps JavaScript API. Otomatik tamamlamayı kullanarak Google Haritalar arama alanının arama sonuçlarının önceden yazılması davranışını uygular. Otomatik tamamlama hizmeti, tam kelimeler ve alt dizelerle eşleşerek yer adları, adresleri ve artı ekleyebilirsiniz. Dolayısıyla uygulamalar, kullanıcı yazarken sorguları göndermek anında yer tahminleri sağlayabilir. Places API tarafından tanımlandığı gibi, bir "yer" bir tesis, coğrafi konum veya önemli bir konum olabilir önemli bir nokta.

Başlarken

Maps JavaScript API'de Yerler kitaplığını kullanmadan önce Rehber API'sinin, Google Cloud Console'da projesi için oluşturduğunuz bir testtir.

Etkin API'lerin listesini görüntülemek için:

1. Şuraya gidin: Google Cloud Console.
2. Proje seçin düğmesini tıklayın, ardından oluşturduğunuz projeyi seçin JavaScript API'sini açın ve Aç'ı tıklayın.
3. Kontrol Paneli'ndeki API listesinde, Yerler API'si.
4. Listede API'yi görüyorsanız hazırsınız demektir. API listede yoksa şunu etkinleştirebilirsiniz:
   1. Sayfanın üst kısmında şunu görüntülemek için API'Yİ ETKİNLEŞTİR'i seçin: Kitaplık sekmesine gidin. Alternatif olarak sol taraftaki menüden Kitaplık'ı seçin.
   2. Places API'yi arayın ve sonuç listesi.
   3. ETKİNLEŞTİR'i seçin. Süreç tamamlandığında Places API, Kontrol paneli.

Kitaplık yükleniyor

Rehber hizmeti, ana kütüphaneden ayrı ve bağımsız bir kitaplıktır. Maps JavaScript API kodu. Sunulan işlevleri kullanmak için bu kitaplıkta, önce libraries kullanarak yüklemeniz gerekir parametresi için:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>

Bkz. Kitaplıklara Genel Bakış başlıklı makaleye göz atın.

Sınıfların özeti

Bu API, aşağıdakileri kullanarak ekleyebileceğiniz iki tür otomatik tamamlama widget'ı sunar: Autocomplete ve SearchBox sınıfları. Ayrıca, AutocompleteService sınıfını kullanarak sonuçları programatik olarak otomatik tamamlama (Haritalar JavaScript API Referansı'na bakın: AutocompleteService sınıfı).

Aşağıda, katılabileceğiniz sınıfların bir özeti yer almaktadır:

• Autocomplete, web sayfanıza bir metin giriş alanı ekler. ve karakter girişleri için bu alanı izler. Kullanıcı metin girerken otomatik tamamlama sonuç tahminlerini açılır seçim listesi. Kullanıcı listeden bir yer seçtiğinde, bilgiler otomatik tamamlama nesnesine döndürülür ve bu öğe tarafından gerçekleştirilir. Ayrıntıları aşağıda bulabilirsiniz.

  

  

• SearchBox, web sayfanıza çok daha fazla Autocomplete ile aynıdır. Farklar aşağıda belirtilmiştir:
  • Temel fark, proje yöneticisinin seçim listesinde görünür. SearchBox malzemeleri yerleri içerebilen daha kapsamlı bir tahmin listesi ( Places API) ve önerilen arama terimlerini de ziyaret edebilirsiniz. Örneğin, kullanıcı yazarsa, seçim listesi şu ifadeyi içerebilir: "kebap in İstanbul" çeşitli pizzaların adlarını da priz.
  • SearchBox, şundan daha az seçenek sunuyor: Aramayı kısıtlamak için Autocomplete. Projede aramayı belirli bir LatLngBounds değerine göre etkileyebilir. arama özelliğini kullanırken, aramayı sadece bir ülke için geçerli yer türlerini ve sınırları belirlemeyi de öğrendiniz. Daha fazla bilgi için bkz. burada bulabilirsiniz.
  ziyaret edin.

  

  ziyaret edin. Ayrıntıları aşağıda bulabilirsiniz.
• Web sitemiz g.co/newsinitiative/labs üzerinden Alınacak AutocompleteService nesne programlı olarak tahmin etmenize olanak tanır. getPlacePredictions() numaralı telefonu arayın: eşleşen yerleri alın veya getQueryPredictions() numaralı telefonu arayın eşleşen yerleri ve önerilen arama terimlerini al. Not: AutocompleteService, herhangi bir kullanıcı arayüzü denetimi eklemez. Bunun yerine, yukarıdaki yöntemler bir dizi tahmin nesnesi döndürür. Her biri tahmin nesnesi, tahmin metnini ve referans metnini içeren sonucun kullanıcı girişiyle nasıl eşleştiğine dair bilgi ve ayrıntılar. Bkz. aşağıda görebilirsiniz.

Otomatik tamamlama widget'ı ekleme

Autocomplete widget, web sayfanızda bir metin giriş alanı oluşturur, kullanıcı arayüzü seçimindeki yerlerle ilgili tahminleri sağlar ve getPlace() isteğine yanıt olarak yer ayrıntılarını döndürür. Bu seçim listesi, tek bir yere karşılık gelir (Places API'si tarafından tanımlandığı şekliyle).

Autocomplete kurucusu iki bağımsız değişken alır:

• text türünde bir HTML input öğesi. Bu, otomatik tamamlamanın düzenlediği giriş alanıdır hizmetin, sonuçları izleyecek ve bunlara ekleyeceği anlamına gelir.
• İsteğe bağlı bir AutocompleteOptions bağımsız değişkeni şu özellikleri içerir:
  • Dahil edilecek fields veri dizisi kullanıcının seçtiği PlaceResult için Place Details yanıtı. Öğe özellik ayarlanmadıysa veya ['ALL'] ayarı başarılı olursa kullanılabilir tüm alanlar döndürülür billed for (bu önerilmez) . Alanların listesi için PlaceResult bölümüne bakın.
  • Şu özelliklere sahip bir types dizisi: değeri, desteklenen türler arasında listelendiği gibi açık bir tür veya tür koleksiyonunu belirtir. Herhangi bir tür belirtilmezse tüm türler geri döndü.
  • bounds, belirten bir google.maps.LatLngBounds nesnesidir alanı arama alanında bulabilirsiniz. Sonuçlar tarafsız olsa da yalnızca aşağıdakilerle sınırlı değildir: yer alır.
  • strictBounds bir boolean API'nin yalnızca kesin olarak tanımlanan bölgenin içinde olan yerleri döndürüp döndürmeyeceğini belirtmek belirtilen bounds değerine göre Aşağıdakiler olsa bile API, bu bölgenin dışında sonuç döndürmez: kullanıcı girişiyle eşleşir.
  • componentRestrictions, sonuçları şununla kısıtlamak için kullanılabilir: yararlanabilirsiniz. Şu anda componentRestrictions ile en fazla 5 filtre uygulayabilirsiniz ülkeler. Ülkeler iki karakterlik, ISO 3166-1 Alpha-2 uyumlu ülke olarak girilmelidir. girin. Birden fazla ülke, ülke kodları listesi olarak iletilmelidir.

    Not: Ülke koduyla birlikte beklenmedik sonuçlar alırsanız ülkelerini, bağımlı bölgeleri ve özel bölgeleri içeren bir kod istediğiniz coğrafi alanı belirleyin. Kod bilgilerini şu adreste bulabilirsiniz: Wikipedia: ISO listesi 3166 ülke kodları veya ISO Online Browsing Platform.

  • placeIdOnly, komut vermek için kullanılabilir. Yalnızca Yer Kimliklerini almak için Autocomplete widget'ı. Arama yapılıyor Autocomplete nesnesinde getPlace(), PlaceResult kullanılabilir hale gelende yalnızca place id bulunur, types ve name özellikleri ayarlandı. Döndürülen Yerler, Coğrafi Kodlama, Yol Tarifi veya Mesafe Matrisi'ne yapılan çağrıları içeren yer kimliği kullanıma sunuyoruz.

Otomatik Tamamlama tahminlerini kısıtlama

Varsayılan olarak, Otomatik Yer Tamamlama özelliği, kullanıcının konumunu belirler ve kullanıcının seçtiği yere ilişkin tüm veri alanlarını getirir. Yeri Ayarla Şu kriterlere göre daha alakalı tahminler sunmak için otomatik tamamlama seçenekleri: en iyi uygulamaları görelim.

Yapım aşamasında seçenekleri ayarla

Autocomplete oluşturucu bir AutocompleteOptions kabul ediyor parametresini kullanabilirsiniz. Aşağıdaki örnek, bounds, componentRestrictions ve types seçeneklerini belirtilen coğrafi bölgedekilere tercih ederek establishment türü yerler iste ve tahminleri yalnızca Amerika Birleşik Devletleri'ndeki yerlerle sınırlandırıyoruz. fields seçeneği, kullanıcının seçtiği yerle ilgili hangi bilgilerin döndürüleceğini belirtir.

Mevcut bir widget'ta bir seçeneğin değerini değiştirmek için setOptions() komutunu çağırın.

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};

const autocomplete = new google.maps.places.Autocomplete(input, options);
index.ts

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
index.js

Veri alanlarını belirtin

İhtiyacınız olmayan Yer Verileri SKU'ları için faturalandırılmamak üzere veri alanlarını belirtin. fields özelliğini Önceki örnekte gösterildiği gibi, widget oluşturucuya iletilen AutocompleteOptions veya mevcut bir Autocomplete nesnesinde setFields() yöntemini çağırın.

autocomplete.setFields(["place_id", "geometry", "name"]);

Her bir ekip için sapmaları ve arama alanı sınırlarını Otomatik tamamlama

Otomatik tamamlama sonuçlarında yaklaşık değerlere öncelik verebilirsiniz. aşağıda belirtilen şekillerde değiştirebilirsiniz:

• Autocomplete nesnesinin oluşturulmasıyla ilgili sınırları belirleyin.
• Mevcut bir Autocomplete ile ilgili sınırları değiştirin.
• Haritanın görüntü alanı için sınırları belirleyin.
• Aramayı sınırlarla sınırlayın.
• Aramayı belirli bir ülkeyle sınırlandırın.

Yukarıdaki örnekte, oluşturma sırasında sınırları ayarlama gösterilmektedir. Aşağıdaki örneklerde diğer ağırlık verme teknikleri gösterilmektedir.

Mevcut bir otomatik tamamlamanın sınırlarını değiştirme

Mevcut bir fotoğraftaki arama alanını değiştirmek için setBounds() numaralı telefonu arayın Dikdörtgen sınırlara Autocomplete.

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
index.ts

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
index.js

Haritanın görüntü alanı için sınırları belirleyin

Sonuçları haritanın görüntü alanına göre etkilemek için bindTo() tuşunu kullanın değişiklik yapabilirsiniz.

autocomplete.bindTo("bounds", map);
index.ts

autocomplete.bindTo("bounds", map);
index.js

Otomatik tamamlama tahminlerinin haritanın görüntü alanından bağlantısını kaldırmak için unbind() öğesini kullanın.

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
index.ts

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
index.js

Örneği inceleyin

Aramayı geçerli sınırlarla kısıtla

Sonuçları, harita görünümüne veya dikdörtgen sınırlara dayalı olarak geçerli sınırlarla kısıtlamak için strictBounds seçeneğini ayarlayın.

autocomplete.setOptions({ strictBounds: true });

Tahminleri belirli bir ülkeyle kısıtlama

componentRestrictions seçeneğini kullanın veya setComponentRestrictions() en fazla beş ülkeden oluşan belirli bir küme için otomatik tamamlama araması.

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});
index.ts

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});
index.js

Örneği inceleyin

Yer türlerini sınırla

Kısıtlamak için types seçeneğini kullanın veya setTypes() çağrısı yapın bazı yer türlerine ilişkin tahminlerde bulunuyor. Bu kısıtlama bir tür veya tür koleksiyonunu belirtir Yer Türleri'nde belirtildiği şekilde seçin. Herhangi bir kısıtlama belirtilmezse tüm türler döndürülür.

types seçeneğinin değeri veya setTypes() öğesine iletilen değer için şunlardan birini belirtebilir:

• Tablo 1'den en fazla beş değeri içeren bir dizi veya Tablo 2, Yer Türleri. Örneğin:

  types: ['hospital', 'pharmacy', 'bakery', 'country']

  veya:

  autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);

• Tablo 3'teki herhangi bir filtre Yer Türleri arasından seçim yapın. Tablo 3'ten yalnızca tek bir değer belirtebilirsiniz.

İstek, şu durumlarda reddedilir:

• Beşten fazla tür belirtiyorsunuz.
• Tanınmayan türleri belirtin.
• Tablo 1'deki tüm türleri karıştırabilirsiniz. veya Tablo 2'deki gibi Tablo 3'ten filtreleyin.

Yerler Otomatik Tamamlama demosu, farklı yer türleri arasındaki tahminlerdeki farklılıkları gösterir.

Demoyu ziyaret edin

Yer bilgileri alınıyor

Kullanıcı, otomatik tamamlamaya ekli tahminlerden bir yer seçtiğinde metin alanına sahipse hizmet, bir place_changed etkinliğini tetikler. Yer sağlamak için ayrıntılar:

1. place_changed etkinliği için bir etkinlik işleyici oluşturun ve addListener() komutunu çağırın Autocomplete nesnesini tıklayın.
2. Autocomplete.getPlace() numaralı telefonu arayın PlaceResult almak için Autocomplete nesnesinde Böylece, seçtiğiniz nesne hakkında daha fazla bilgi edinmek için yer.

Varsayılan olarak, kullanıcı bir yer seçtiğinde, otomatik tamamlama işlevi kullanılabilir veri alanlarını kapsar ve buna göre ücretlendirilirsiniz. Autocomplete.setFields() kullanın döndürülecek yer verisi alanlarını belirtin. Şu konu hakkında daha fazla bilgi edinin: PlaceResult nesnesi, talep edebilirsiniz. İhtiyacınız olmayan veriler için ödeme yapmamak istiyorsanız Autocomplete.setFields() kullanarak yalnızca kullanacağınız yer verilerini ekleyin.

name özelliği, Yerler Otomatik Tamamlama tahminlerinden description. Web sitemiz g.co/newsinitiative/labs üzerinden description Yerler Otomatik tamamlama belgelerine bakın.

Adres formları için adresin yapılandırılmış biçimde alınması yararlıdır. Alıcı: seçilen yerin yapılandırılmış adresini döndürün, Autocomplete.setFields() ve address_components alanını belirtin.

Aşağıdaki örnekte bir adresteki alanları doldurmak için otomatik tamamlama kullanılmaktadır formunu doldurun.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // 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/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = 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") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).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();
}
index.ts

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // 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/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = 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;
index.js

Örneği inceleyin

Yer tutucu metni özelleştirme

Varsayılan olarak, otomatik tamamlama hizmeti tarafından oluşturulan metin alanında standart yer tutucu metni. Metni değiştirmek için input öğesindeki placeholder özelliği:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

Not: Varsayılan yer tutucu metni otomatik olarak yerelleştirilir. Şu durumda: kendi yer tutucu değerinizi belirtmeniz durumunda, bunun yerelleştirilmesini değeri olarak kabul edilir. Haritalar'ın Google Haritalar'daki Kullanılacak dili JavaScript API seçer. Lütfen şu konudaki dokümanları okuyun: yerelleştirme.

Widget görünümünü özelleştirmek için Otomatik tamamlama ve Arama Kutusu widget'larının stilini belirleme başlıklı makaleye bakın.

SearchBox widget'ı ekleme

SearchBox, kullanıcıların metin tabanlı bir coğrafi konum gerçekleştirmesine olanak tanır. "İstanbul'da pizza" gibi bir arama yapın veya "robson sokağı yakınındaki ayakkabı mağazaları" gibi aramalar yapabilirsiniz. SearchBox öğesini bir metin alanına ekleyebilir ve metin girildiğinde hizmet, açılır liste biçimindedir.

SearchBox, tahminlerin daha kapsamlı bir listesini sunar. yerler (Yerler API'si tarafından tanımlandığı şekliyle) ve önerilen aramayı içerebilir şartlarını kabul edersiniz. Örneğin, kullanıcı 'yeni pizza' girerse seçim listesi "İstanbul'da pizza" ifadesini eklemeli çeşitli adların pizzacılar. Kullanıcı listeden bir yer seçtiğinde, söz konusu yer hakkındaki bilgiler Arama Kutusu nesnesine döndürülür ve uygulamanız tarafından alındı.

SearchBox kurucusu iki bağımsız değişken alır:

• text türünde bir HTML input öğesi. Bu SearchBox hizmetinin izleyeceği giriş alanını ekleyebilirsiniz.
• Şunları içerebilecek bir options bağımsız değişkeni bounds özelliği: bounds bir google.maps.LatLngBounds yerlerin aranacağı alanı belirten bir nesnedir. Sonuçlar yer alan yerlere karşı eğilimli olur, ancak unutmayın.

Aşağıdaki kod, sonuçlarda sapmalar sağlamak için "bounds" parametresini kullanır belirli bir coğrafi bölgedeki yerlere göre, enlem/boylam koordinatları.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Arama Kutusu için arama alanını değiştirme

Mevcut bir SearchBox için arama alanını değiştirmek üzere şu numarayı arayın: SearchBox nesnesinde setBounds() ve alakalı LatLngBounds nesnesi.

Örneği inceleyin

Yer bilgileri alınıyor

Kullanıcı aramaya ekli tahminlerden bir öğe seçtiğinde kutusunda, hizmet bir places_changed etkinliği tetikler. Şunları yapabilirsiniz: SearchBox nesnesinde getPlaces() yöntemini çağırın Her biri bir tahmin içeren ve her biri PlaceResult nesne.

PlaceResult nesnesi hakkında daha fazla bilgi için belgeleri, yer ayrıntıları sonuçlarını inceleyin.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = 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.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.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);
});
index.ts

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = 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.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.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);
});
index.js

Örneği inceleyin

Widget görünümünü özelleştirmek için Otomatik tamamlama ve Arama Kutusu widget'larının stilini belirleme başlıklı makaleye bakın.

Otomatik Yer Tamamlama Hizmeti tahminlerini programatik olarak alma

Tahminleri programatik olarak almak için AutocompleteService sınıfı. AutocompleteService. herhangi bir kullanıcı arayüzü denetimi eklemez. Bunun yerine bir tahmin dizisi döndürüyor her biri tahmin metnini, referans bilgilerini ve bilgileri içeren ve sonucun kullanıcı girişiyle nasıl eşleştiğine dair ayrıntılar. Bu özellik, kullanıcı arayüzü üzerinde Autocomplete ve SearchBox tarafından sunulmaktadır 'ne başvurun.

AutocompleteService aşağıdaki yöntemleri sunar:

• getPlacePredictions() sonuç tahminleri döndürüyor. Not: "Yer" bir kuruluş, coğrafi konum veya önemli bir yer olabilir eksiksiz bir şekilde sunmalıdır.
• getQueryPredictions(), şunun genişletilmiş bir listesini döndürür: yerleri içerebilen tahminler (Places API tarafından tanımlandığı şekliyle) artı önerilen arama terimleri. Örneğin, kullanıcı yazarsa, seçim listesi şu ifadeyi içerebilir: "kebap in İstanbul" çeşitli pizzacıların isimlerini de görebilirsiniz.

Yukarıdaki yöntemlerin her ikisi de tahmin nesnelerinde bulunacaktır:

• description, eşleşen tahmindir.
• distance_meters, yerin ile arasındaki mesafeyi metre cinsinden belirtir belirtilen AutocompletionRequest.origin.
• matched_substrings, kullanıcının girişindeki öğelerle eşleşen açıklama. Bu, özellikle ve uygulamanızda bu alt dizeleri vurgulayabilirsiniz. Birçok durumda, sorgusu, açıklama alanının alt dizesi olarak görünür.
  • length, alt dizenin uzunluğudur.
  • offset, karakter uzaklığıdır ve açıklama dizesinin başlangıcı, burada eşleşen alt dize görünür.
• place_id, benzersiz bir şekilde tanımlayan metinsel bir tanımlayıcıdır bir yer. Yer hakkında bilgi almak için bu tanımlayıcıyı bir placeId alanı Yer Ayrıntıları isteyin. Şu işlemler hakkında daha fazla bilgi edinin: bir yere referans verin girin.
• terms, sorgu öğelerini içeren bir dizidir. Örneğin, yer alırsa her öğe genellikle adresin bir bölümünü oluşturur.
  • offset, karakter uzaklığıdır ve açıklama dizesinin başlangıcı, burada eşleşen alt dize görünür.
  • value, eşleşen terim.

Aşağıdaki örnek, şu ifade için bir sorgu tahmin isteği yürütür: "yakınımda pizzacı" ve sonucu bir listede görüntüler.

// 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">
function initService(): void {
  const displaySuggestions = 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) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      (document.getElementById("results") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;
index.ts

// 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">
function initService() {
  const displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

window.initService = initService;
index.js

style.css

<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>
index.html

Örneği inceleyin

Oturum jetonları

AutocompleteService.getPlacePredictions() Faturalandırma için otomatik tamamlama isteklerini birlikte gruplandırmak üzere oturum jetonlarını (uygulandıysa) kullanabilir amaçlar. Oturum jetonları, bir kullanıcının sorgu ve seçim aşamalarını gruplandırır faturalandırma amacıyla ayrı bir oturuma otomatik olarak tamamlama özelliği sunar. Oturum kullanıcı sorgu yazmaya başladığında başlar ve bir sorgu seçtiğinde sona erer yer. Her oturumda birden fazla sorgu bulunabilir ve ardından tek bir yer seçimi yapılabilir. Oturum sona erdiğinde jeton artık geçerli olmaz. Uygulamanız yeni bir jeton oluşturabilirsiniz. Şunun için oturum jetonlarının kullanılmasını öneririz: tüm otomatik tamamlama oturumlarını kullanabilirsiniz. sessionToken parametresi atlanırsa veya bir oturum jetonunu yeniden kullanırsanız oturum, oturum jetonu sağlandı (her istek ayrı olarak faturalandırılır).

Aynı oturum jetonunu kullanarak tek bir Yer Ayrıntıları AutocompleteService.getPlacePredictions() numaralı telefona yapılan aramadan kaynaklanan yerle ilgili istek. Bu durumda, otomatik tamamlama isteği Yer Ayrıntıları ile birleştirilir isteği yer alır ve arama, normal Yer Ayrıntısı isteği olarak ücretlendirilir. Ücretsiz Otomatik tamamlama isteği.

Her yeni oturum için benzersiz bir oturum jetonu ilettiğinizden emin olun. Aynı jetonu şundan daha fazla süre için kullanmak: bir Otomatik Tamamlama oturumu, bu Otomatik Tamamlama oturumlarını geçersiz kılar ve tüm Otomatik Tamamlama isteği geçersiz oturumlarda Otomatik Tamamlama özelliği kullanılarak tek tek ücretlendirilecektir. İstek Başına SKU'su. Oturum jetonları hakkında daha fazla bilgi edinin.

Aşağıdaki örnekte bir oturum jetonu oluşturma ve daha sonra bunu AutocompleteService (displaySuggestions() fonksiyonunun kısaltılması için atılmıştır):

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.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ı birden fazla oturum için jeton her bir isteğin faturalandırılmasına neden olur ayrı ayrı düzenleyebilirsiniz.

Oturum jetonları hakkında daha fazla bilgi edinin.

Otomatik tamamlama ve Arama Kutusu widget'larının stilini belirleme

Varsayılan olarak, Autocomplete ve SearchBox bir Google haritasına dahil edilmek üzere stilize edildi. İstebilirsiniz kullanarak stili sitenize uygun şekilde ayarlayabilirsiniz. Aşağıdaki CSS sınıfları kullanılabilir. Aşağıda listelenen tüm sınıflar hem Autocomplete ve SearchBox widget'ları.

Yer Seçici bileşenini kullanma

Not: Bu örnekte açık kaynak bir kitaplık kullanılmaktadır. Bkz. Destek için README geri bildirim almaktır.

Web bileşenlerini deneyin. Son kullanıcıların otomatik tamamlama özelliğini kullanarak belirli bir adresi veya yeri aramasına olanak tanıyan metin girişini etkinleştirmek için Yer Seçici web bileşeni.

Yer Otomatik Tamamlama optimizasyonu

Bu bölümde Google Ads'den en iyi şekilde yararlanmanıza yardımcı olacak en iyi uygulamalar Otomatik Yer Tamamlama hizmeti.

Bazı genel kurallar şunlardır:

• Çalışan bir kullanıcı arayüzü geliştirmenin en hızlı yolu Maps JavaScript API Otomatik tamamlama widget'ı, Android için Yerler SDK'sı Otomatik tamamlama widget'ı, veya Yerler SDK'sı Otomatik tamamlama kullanıcı arayüzü kontrolü
• Temel Yer Otomatik Tamamlama özelliği hakkında bilgi sahibi olun veri alanlarını en baştan iki kez kontrol edin.
• Konuma ağırlık verme ve konum kısıtlama alanları isteğe bağlıdır, ancak otomatik tamamlama performansı üzerinde önemli bir etkisi vardır.
• Uygulamanızın sorunsuz şekilde düşmesini sağlamak için hata işlemeyi kullanın bir hata döndürür.
• Uygulamanızın seçim yapılmadığı durumlarda bunu yaptığından ve kullanıcılara seçeneğini tıklayın.

Maliyet optimizasyonuyla ilgili en iyi uygulamalar

Temel maliyet optimizasyonu

Otomatik Yer Tamamlama özelliğini kullanmanın maliyetini optimize etmek için hizmeti kullanmak için, Yer Ayrıntıları ve Yer Otomatik Tamamlama widget'larındaki alan maskelerini kullanarak yalnızca yer veri alanlarını kullanın.

Gelişmiş maliyet optimizasyonu

İstek Başına fiyatlandırma özelliğine erişmek ve seçilen yer hakkında Yer Ayrıntıları yerine Coğrafi Kodlama API'si sonuçlarını istemek için Otomatik Yer Tamamlama özelliğinin programatik olarak uygulanmasını göz önünde bulundurun. Aşağıdaki koşulların her ikisi de karşılanırsa İstek Başına Fiyatlandırma, Geocoding API ile eşleştirilen Oturum Başına (oturuma dayalı) fiyatlandırmadan daha uygun maliyetlidir:

• Yalnızca kullanıcının seçtiği yerin enlem/boylam veya adresine ihtiyaç duyarsanız Coğrafi Kodlama API'si bu bilgileri Yer Ayrıntısı çağrısından daha düşük bir ücret karşılığında sunar.
• Kullanıcılar ortalama dört veya daha az Otomatik Tamamlama tahmin isteği içinde bir otomatik tamamlama tahmini seçerse, İstek Başına fiyatlandırma, Oturum Başına fiyatlandırmadan daha uygun maliyetli olabilir.

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

Performansla ilgili en iyi uygulamalar

Aşağıdaki yönergelerde Otomatik Yer Tamamlama performansının optimize edilmesi için izlenecek yöntemler açıklanmaktadır:

• Ülke kısıtlamaları ekleyin, konuma ağırlık verme, Otomatik Yer Tamamlama ayarınıza (programatik uygulamalar için) dil tercihinizi ekleyin hakkında bilgi edindiniz. Dil tercihi yapmanız gerekmez Dil tercihlerini kullanıcının tarayıcısından veya mobil cihazından seçtikleri için, widget'larla
• Otomatik Yer Tamamlama'ya bir harita eşlik ediyorsa, konumu harita görünümüne göre değiştirebilirsiniz.
• Kullanıcının Otomatik Tamamlama tahminlerinden birini seçmediği durumlarda, genellikle Bu tahminlerin hiçbiri istenen sonuç adresi olmadığından, orijinal daha alakalı sonuçlar almaya çalışmak için kullanıcı girdisi:
  • Kullanıcının yalnızca adres bilgilerini girmesini bekliyorsanız orijinal kullanıcı girişini yeniden kullanın Geocoding API'ye yapılan bir çağrıda.
  • Kullanıcının ada veya adrese göre belirli bir yer hakkında sorgu girmesini bekliyorsanız Yer Bulma isteği kullanın. Yalnızca belirli bir bölgede sonuç bekleniyorsa konuma ağırlık verme.
  ziyaret edin. Coğrafi Kodlama API'sini kullanmanın en iyi seçenek olacağı diğer senaryolar şunlardır:
  • Otomatik Yer Tamamlama desteğinin sunulduğu ülkelerdeki alt şirket içi adresleri giren kullanıcılar alt şirket adresleri eksik, ör. Çekya, Estonya ve Litvanya. Örneğin, Çekçe adres "Stroupežnického 3191/17, Praha" Place konumunda kısmi bir tahmin verir Otomatik tamamlama.
  • "23-30 29th St, Queens" gibi yol ön ekleriyle adresler giren kullanıcılar inç New York City veya "47-380 Kamehameha Hwy, Kaneohe" bir şehir manzarası var.

Kullanım sınırları ve politikalar

Kotalar

Kota ve fiyatlandırma bilgileri için bkz. Places API için Kullanım ve Faturalandırma belgeleri.

Politikalar

Yerler Kitaplığı'nın kullanımı için Maps JavaScript API, tanımlanan politikalar hakkında daha fazla bilgi edinin.