Willkommen bei der experimentellen Version des neuen verbesserten Place Autocomplete-Diensts. Place Autocomplete ist ein Webdienst der Places Library in der Maps JavaScript API. Damit sind in Ihren Anwendungen dieselben automatischen Vervollständigungen wie im Suchfeld von Google Maps möglich. Place Autocomplete findet Übereinstimmungen mit vollständigen Wörtern und Teilstrings, sodass sich Ortsnamen, Adressen und Plus Codes zuordnen lassen. Anwendungen können Abfragen senden, während der Nutzer tippt, und schon bei der Eingabe Ortsvorschläge ausgeben.
Voraussetzungen
Willkommen bei der experimentellen Version des neuen Place Autocomplete-Diensts. Wenn Sie „Text Search“ (Vorabversion) verwenden möchten, müssen Sie die Places API in Ihrem Google Cloud-Projekt aktivieren und den Alphakanal (v: "alpha") in Ihrem Bootstrap-Ladeprogramm angeben. Weitere Informationen
Das ist neu
„Place Autocomplete“ (experimentell) wurde in den folgenden Bereichen optimiert:
- Die Benutzeroberfläche des Autocomplete-Widgets unterstützt die regionale Lokalisierung (einschließlich RTL-Sprachen) für den Texteingabeplatzhalter, das Logo der Liste mit Vorschlägen und die Ortsvorschläge.
- Die Bedienungshilfen wurden weiter verbessert, einschließlich Unterstützung für Screenreader und Tastaturinteraktionen.
- Das Autocomplete-Widget gibt die neue Place-Klasse zurück, um die Verarbeitung des zurückgegebenen Objekts zu vereinfachen.
- Bessere Unterstützung für Mobilgeräte und kleine Bildschirme.
- Bessere Leistung und grafische Darstellung.
Autocomplete-Widget hinzufügen
Sie können einer Webseite oder Google-Karte ein Autocomplete-Widget hinzufügen. Das Autocomplete-Widget erstellt ein Texteingabefeld, liefert Ortsvorschläge in einer Auswahlliste und gibt Ortsdetails als Reaktion auf Nutzerklicks über den Listener gmp-placeselect zurück. In diesem Abschnitt wird beschrieben, wie Sie einer Webseite oder Google-Karte ein solches Widget hinzufügen.
Autocomplete-Widget auf einer Webseite einfügen
Wenn Sie das Autocomplete-Widget auf einer Webseite einfügen möchten, erstellen Sie ein neues input-Element, mit dem Sie dann ein neues google.maps.places.PlaceAutocompleteElement erstellen, das Sie wiederum an die Seite anhängen. Hier ein Beispiel:
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);
Vollständiges Codebeispiel ansehen
Karte ein Autocomplete-Widget hinzufügen
Wenn Sie einer Karte ein Autocomplete-Widget hinzufügen möchten, erstellen Sie ein neues input-Element, mit dem Sie dann eine neue google.maps.places.PlaceAutocompleteElement-Instanz erstellen. Danach hängen Sie das PlaceAutocompleteElement an ein div-Element an und verschieben es als benutzerdefiniertes Steuerelement auf die Karte. Hier ein Beispiel:
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);
Vollständiges Codebeispiel ansehen
Automatische Vervollständigung einschränken
Standardmäßig zeigt Place Autocomplete sämtliche Ortstypen an. Dabei werden die Vorschläge nach der Nähe zum Nutzerstandort gewichtet. Es werden alle verfügbaren Datenfelder für den vom Nutzer ausgewählten Ort abgerufen. Sie können die Optionen für Place Autocomplete 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 Autocomplete-Widget 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 Autocomplete-Widget Ergebnisse innerhalb des angegebenen Bereichs an, einige können jedoch auch außerhalb liegen.
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 componentRestrictions, um die entsprechenden Ländercodes anzugeben, wie im folgenden Snippet gezeigt:
const pac = new google.maps.places.PlaceAutocompleteElement({
inputElement: input,
componentRestrictions: {country: ['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.PlaceAutocompleteElement({
inputElement: input,
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.PlaceAutocompleteElement({
inputElement: input,
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 types und geben einen oder mehrere Typen an, wie hier gezeigt:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({
inputElement: input,
types: ['establishment'],
});
Eine vollständige Liste der unterstützten Typen finden Sie unter Tabelle 3: In Place Autocomplete-Anfragen unterstützte Typensammlungen.
Ortsdetails abrufen
Fügen Sie dem PlaceAutocompleteElement einen gmp-place-select-Listener hinzu, um Ortsdetails für den ausgewählten Ort abzurufen. Hier ein Beispiel:
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,
);
});
Vollständiges Codebeispiel ansehen
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.
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;
});
Vollständiges Codebeispiel ansehen
Geocoding-Ergebnisse für den ausgewählten Ort abrufen
Um Geocoding-Ergebnisse für den ausgewählten Ort zu erhalten, verwenden Sie google.maps.Geocoder, um den Ort abzurufen, wie im folgenden Snippet gezeigt:
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 inputElement = document.getElementById('pac-input');
const autocomplete = new google.maps.places.PlaceAutocompleteElement({inputElement});
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,
});
});
Beispielkarten
Dieser Abschnitt enthält den vollständigen Code für die Beispielkarten auf dieser Seite.
Autocomplete-Element
In diesem Beispiel wird einer Webseite ein Autocomplete-Widget hinzugefügt. Außerdem werden die Ergebnisse für jeden ausgewählten Ort angezeigt.
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: "alpha"});</script>
</body>
</html>
Testbeispiel
Einer Karte ein Autocomplete-Widget hinzufügen
In diesem Beispiel wird gezeigt, wie Sie einer Google-Karte ein Autocomplete-Widget hinzufügen.
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;
}
#place-autocomplete {
width: 250px;
}
#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: "alpha"});</script>
</body>
</html>