Einfaches „Place Autocomplete“-Element

Über das BasicPlaceAutocompleteElement-Widget wird ein Texteingabefeld erstellt, es werden Vorschläge für Orte in einer Auswahlliste in der Benutzeroberfläche angezeigt und eine Orts-ID für den ausgewählten Ort zurückgegeben.

Im Gegensatz zum PlaceAutocompleteElement wird beim vereinfachten Basic Place Autocomplete-Element das Eingabefeld gelöscht, wenn ein Nutzer einen Ortsvorschlag auswählt. Außerdem wird ein Place-Objekt zurückgegeben, das nur die Orts-ID und nicht ein PlacePrediction-Objekt enthält. Verwenden Sie diese Orts-ID mit einem Places UI Kit Details-Element, um zusätzliche Ortsdetails abzurufen.

Vorbereitung

Wenn Sie das Basic Place Autocomplete-Element verwenden möchten, müssen Sie „Places UI Kit“ in Ihrem Google Cloud-Projekt aktivieren. Weitere Informationen

Einfaches „Place Autocomplete“-Element hinzufügen

Das Element „Basic Place Autocomplete“ erstellt ein Texteingabefeld, liefert Ortsvorschläge in einer Auswahlliste und gibt eine Orts-ID als Reaktion auf eine Nutzerauswahl über das Ereignis gmp-select zurück. In diesem Abschnitt wird beschrieben, wie Sie einer Webseite oder Karte ein Basic Autocomplete-Element hinzufügen.

Einfaches Autocomplete-Element auf einer Webseite einfügen

Wenn Sie das BasicAutocomplete-Element auf einer Webseite einfügen möchten, erstellen Sie ein neues google.maps.places.BasicPlaceAutocompleteElement-Element, das Sie wiederum an die Seite anhängen. Hier ein Beispiel: 

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

Basiselement für die automatische Vervollständigung in eine Karte einfügen

Wenn Sie einer Karte ein einfaches Autocomplete-Element hinzufügen möchten, erstellen Sie eine neue BasicPlaceAutocompleteElement-Instanz, hängen Sie sie an ein div-Element an und verschieben Sie sie als benutzerdefiniertes Steuerelement auf die Karte. Hier ein Beispiel:

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

Automatische Vervollständigung einschränken

Standardmäßig werden bei Basic Place Autocomplete alle Ortstypen angezeigt, wobei die Vorschläge nach Nähe zum Nutzerstandort gewichtet werden. Sie können BasicPlaceAutocompleteElementOptions so festlegen, dass relevantere Vorschläge angezeigt werden. Dazu schränken Sie die Ergebnisse ein oder wenden eine Gewichtung an.

Werden die Ergebnisse eingeschränkt, ignoriert das Basic Autocomplete-Element alle Ergebnisse, die außerhalb des festgelegten Bereichs liegen. Häufig werden die Ergebnisse auf die Kartengrenzen beschränkt. Wenn Sie eine Gewichtung anwenden, zeigt das BasicAutocomplete-Element Ergebnisse innerhalb des angegebenen Bereichs an, einige können jedoch auch außerhalb liegen.

Wenn Sie weder Grenzen noch den Darstellungsbereich der Karte definieren, versucht die API, den Standort des Nutzers anhand seiner IP-Adresse zu ermitteln, und gewichtet die Ergebnisse nach diesem Standort. Legen Sie nach Möglichkeit Grenzen fest. Andernfalls sehen unterschiedliche Nutzer möglicherweise unterschiedliche Vorschläge. Um die Vorschläge generell zu verbessern, ist es außerdem wichtig, einen sinnvollen Darstellungsbereich festzulegen. Dieser kann z. B. durch Schwenken oder Zoomen der Karte ausgewählt oder vom Entwickler anhand des Gerätestandorts und eines entsprechenden Umkreises festgelegt werden. Wenn kein Umkreis angegeben ist, werden 5 km als sinnvoller Standardwert für das Basic Place Autocomplete-Element betrachtet. Wählen Sie keinen Darstellungsbereich aus, der keinen Umkreis hat (d. h. keinen einzelnen Punkt), der einen Durchmesser von weniger als 100 Metern hat oder der den gesamten Globus umfasst.

Place Search-Ergebnisse nach Land einschränken

Wenn Sie die Place Search-Ergebnisse auf ein oder mehrere Länder beschränken möchten, verwenden Sie das Attribut includedRegionCodes, um die entsprechenden Ländercodes anzugeben, wie im folgenden Snippet gezeigt:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Place Search-Ergebnisse auf Kartengrenzen beschränken

Wenn Sie die Place Search-Ergebnisse auf die Grenzen einer Karte beschränken möchten, verwenden Sie das Attribut locationRestrictions, um die Grenzen festzulegen, wie im folgenden Snippet gezeigt:

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

Wenn Sie die Ergebnisse auf die Kartengrenzen beschränken, müssen Sie einen Listener hinzufügen, damit die Grenzen bei Änderungen aktualisiert werden:

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

Um locationRestriction zu entfernen, legen Sie dafür null fest.

Gewichtung auf Place Search-Ergebnisse anwenden

Wenn Sie eine Gewichtung auf einen kreisförmigen Bereich vornehmen möchten, verwenden Sie das Attribut locationBias und übergeben Sie einen Umkreis, wie hier gezeigt:

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

Um locationBias zu entfernen, legen Sie dafür null fest.

Place Search-Ergebnisse auf bestimmte Typen beschränken

Sie können die Place Search-Ergebnisse auf bestimmte Ortstypen beschränken. Dazu verwenden Sie das Attribut includedPrimaryTypes und geben einen oder mehrere Typen an, wie hier gezeigt:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Eine vollständige Liste der unterstützten Typen finden Sie in Tabelle A und Tabelle B.

Ortsdetails abrufen

Fügen Sie dem PlaceAutocompleteElement einen gmp-select-Listener hinzu, um die Orts-ID für den ausgewählten Ort abzurufen. Hier ein Beispiel: 

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

Im vorherigen Beispiel gibt der Ereignis-Listener ein Objekt der Place-Klasse zurück. Rufen Sie place.fetchFields() auf, um die für Ihre Anwendung erforderlichen Place Details-Datenfelder abzurufen.

Der Listener im nächsten Beispiel fordert Ortsinformationen an und präsentiert sie auf einer Karte.

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

In diesem Beispiel wird gezeigt, wie Sie einer Google-Karte ein Basic Autocomplete-Element hinzufügen.

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

Testbeispiel