Temel Yer Adı Otomatik Tamamlama Öğesi

BasicPlaceAutocompleteElement, bir metin girişi alanı oluşturur, kullanıcı arayüzü seçim listesinde yer tahminleri sağlar ve seçilen yer için bir yer kimliği döndürür.

PlaceAutocompleteElement öğesinin aksine, basitleştirilmiş Temel Yer Otomatik Tamamlama öğesi, kullanıcı bir yer tahmini seçtiğinde giriş alanını temizler ve PlacePrediction nesnesi yerine yalnızca yer kimliğini içeren bir Yer nesnesi döndürür. Ek yer ayrıntıları almak için bu yer kimliğini Places UI Kit Ayrıntıları öğesiyle birlikte kullanın.

Ön koşullar

Temel Yer Otomatik Tamamlama öğesini kullanmak için Google Cloud projenizde "Places UI Kit"i etkinleştirmeniz gerekir. Ayrıntılar için Başlangıç başlıklı makaleyi inceleyin.

Temel Yer Otomatik Tamamlama öğesi ekleme

Temel Yer Otomatik Tamamlama öğesi, bir metin girişi alanı oluşturur, kullanıcı arayüzü seçim listesinde yer tahminleri sağlar ve gmp-select etkinliğini kullanarak kullanıcı seçimlerine yanıt olarak bir yer kimliği döndürür. Bu bölümde, bir web sayfasına veya haritaya nasıl Temel Otomatik Tamamlama öğesi ekleyeceğiniz gösterilmektedir.

Web sayfasına Temel Otomatik Tamamlama öğesi ekleme

BasicAutocomplete öğesini bir web sayfasına eklemek için yeni bir google.maps.places.BasicPlaceAutocompleteElement oluşturun ve aşağıdaki örnekte gösterildiği gibi sayfaya ekleyin: 

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

Haritaya Temel Otomatik Tamamlama öğesi ekleme

Haritaya Temel Otomatik Tamamlama öğesi eklemek için yeni bir BasicPlaceAutocompleteElement örneği oluşturun, bunu bir div öğesine ekleyin ve aşağıdaki örnekte gösterildiği gibi özel bir kontrol olarak haritaya gönderin:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

Otomatik tamamlama tahminlerini kısıtlama

Varsayılan olarak, Temel Yer Otomatik Tamamlama, kullanıcının konumunun yakınındaki tahminlere yönelik önyargılı bir şekilde tüm yer türlerini sunar. Sonuçları kısıtlayarak veya yönlendirerek daha alakalı tahminler sunmak için BasicPlaceAutocompleteElementOptions ayarını yapın.

Sonuçların kısıtlanması, Temel Otomatik Tamamlama öğesinin 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, BasicAutocomplete öğesinin belirtilen alan içindeki sonuçları göstermesini sağlar ancak bazı eşleşmeler bu alanın dışında olabilir.

Herhangi bir sınır veya harita görüntü alanı sağlamazsanız API, kullanıcının konumunu IP adresinden tespit etmeye çalışır ve sonuçları bu konuma göre düzenler. Mümkün olduğunda sınırları belirleyin. Aksi takdirde, farklı kullanıcılar farklı tahminler alabilir. Ayrıca, tahminleri genel olarak iyileştirmek için mantıklı bir görünüm alanı sağlamak önemlidir. Örneğ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ı. Yarıçap kullanılamadığında, Basic Place Autocomplete öğesi için 5 km makul bir varsayılan değer olarak kabul edilir. Sıfır yarıçaplı (tek nokta), yalnızca birkaç metre genişliğinde (100 metreden az) 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.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Yer arama işlemlerini 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.BasicPlaceAutocompleteElement({
  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 göre yönlendirin:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  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.BasicPlaceAutocompleteElement({
  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 yerin yer kimliğini almak için aşağıdaki örnekte gösterildiği gibi gmp-select dinleyicisi ekleyin:PlaceAutocompleteElement 

// Add the gmp-select listener, and display the results.
  placeAutocomplete.addEventListener('gmp-select', async ({ place }) => {
      await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
      selectedPlaceTitle.textContent = 'Selected Place:';
      selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
  });

Önceki örnekte, etkinlik işleyici Place 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 örnekteki dinleyici, yer bilgisi isteğinde bulunuyor ve bu bilgiyi haritada gösteriyor.

  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', 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;
  });

Bu örnekte, Google Haritası'na Temel Otomatik Tamamlama öğesinin nasıl ekleneceği gösterilmektedir.

JavaScript

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();
index.js

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
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>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>
index.html

Örneği deneyin