Einfaches „Place Autocomplete“-Element

Plattform auswählen: Android iOS JavaScript

Ü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.

Das Basic Place Autocomplete-Element ist einfacher zu implementieren als das PlaceAutocompleteElement und unterscheidet sich in den folgenden Punkten:

  • Das Basic Place Autocomplete-Element gibt ein Place-Objekt zurück, das nur die Orts-ID und nicht ein PlacePrediction-Objekt enthält. Sie können die zurückgegebene Orts-ID direkt mit einem Places UI Kit-Detail-Element verwenden, um zusätzliche Ortsdetails abzurufen. Ein PlacePrediction-Objekt muss zuerst in eine Orts-ID konvertiert werden.
  • Für das Basic Place Autocomplete-Element müssen Sie die Places API nicht laden.
  • Das Basic Place Autocomplete-Element leert das Eingabefeld, wenn ein Nutzer einen Ortsvorschlag auswählt.

Vorbereitung

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

Einfaches „Place Autocomplete“-Element hinzufügen

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, hängen Sie ein BasicPlaceAutocompleteElement-Element an ein gmp-map-Element an und legen Sie seine Position mit dem Attribut slot fest. Hier ein Beispiel:

<gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
  <gmp-basic-place-autocomplete
    slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>
index.html

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.

Element „Ortsanfrage“ konfigurieren

Fügen Sie einen Listener hinzu, um das Place Request-Element zu aktualisieren, wenn der Nutzer einen Vorschlag auswählt: 

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();
    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
    placeDetailsRequest.place = event.place.id;
});
index.js

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

JavaScript

const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');
async function initMap() {
    // Asynchronously load required libraries from the Google Maps JS API.
    await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;
    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;
    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });
    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map: map,
        collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
    });
    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new google.maps.Size(0, -10),
    });
    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();
        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place.location;
        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });
    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });
    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();
        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new google.maps.Circle({
            center: {
                lat: newCenter.lat(),
                lng: newCenter.lng(),
            },
            radius: 10000, // 10km in meters.
        });
    });
}
initMap();
index.js

CSS

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

gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 30px;
  width: 500px;
  top: 10px;
  left: 10px;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
  color-scheme: light;
  border-radius: 10px;
}
style.css

HTML

<html>
  <head>
    <title>Basic Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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>
  </head>
  <body>
    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
      <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
    </gmp-map>
    <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
    <gmp-place-details-compact
      orientation="horizontal"
      style="width: 400px;
      display: none;
      border: none;
      padding: 0;
      margin: 0;
      background-color: transparent;
      color-scheme: light;">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-standard-content></gmp-place-standard-content>
    </gmp-place-details-compact>
  </body>
</html>
index.html

Testbeispiel