Ortsdetails (neu)

Plattform auswählen: Android iOS JavaScript Webdienst
Entwickler im Europäischen Wirtschaftsraum (EWR)

Objekt platzieren

Das Place Objekt, das Informationen zu einem Ort enthält, wird dynamisch von der Text Search, der Nearby Search und der Place Autocomplete zurückgegeben. Sie können auch ein Place Objekt aus einer Orts-ID oder einem Ressourcennamen erstellen. Der Ressourcenname ist die Orts-ID mit dem Präfix places/. Im folgenden Snippet wird gezeigt, wie ein Place Objekt mit einer Orts-ID erstellt wird: 

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
});

Sie können auch ein Place-Objekt aus einem Ortsressourcennamen erstellen: 

// Use a place resource name to create a new Place instance.
const place = new Place({
  resourceName: 'places/ChIJyYB_SZVU2YARR-I1JRF08F0', // San Diego Zoo
});

Weitere Informationen finden Sie unter PlaceOptions.

Felder abrufen

Wenn Sie ein vorhandenes Place Objekt oder eine Orts-ID oder einen Ressourcennamen haben, verwenden Sie die Place.fetchFields() Methode, um Details zu diesem Ort abzurufen. Geben Sie eine durch Kommas getrennte Liste der Ortsdatenfelder an, die zurückgegeben werden sollen. Geben Sie die Feldnamen in der Camel-Case-Schreibweise an. Verwenden Sie das zurückgegebene Place Objekt, um Daten für die angeforderten Felder zu erhalten.

Im folgenden Beispiel wird eine Orts-ID verwendet, um eine neue Place-Instanz zu erstellen. Danach wird Place.fetchFields() aufgerufen, um die Felder displayName und formattedAddress abzurufen. Außerdem wird der Karte eine Markierung hinzugefügt.

TypeScript

async function getPlaceDetails() {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
    ]);

    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}

JavaScript

async function getPlaceDetails() {
    const [{ Place }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('places'),
        google.maps.importLibrary('marker'),
    ]);

    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJyYB_SZVU2YARR-I1Jjf08F0', // San Diego Zoo
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({
        fields: [
            'displayName',
            'formattedAddress',
            'location',
            'googleMapsURI',
        ],
    });

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Assemble the info window content.
    const content = document.createElement('div');
    const address = document.createElement('div');
    const placeId = document.createElement('div');
    address.textContent = place.formattedAddress || '';
    placeId.textContent = place.id;
    content.append(placeId, address);

    if (place.googleMapsURI) {
        const link = document.createElement('a');
        link.href = place.googleMapsURI;
        link.target = '_blank';
        link.textContent = 'View Details on Google Maps';
        content.appendChild(link);
    }

    // Display an info window.
    infoWindow.setHeaderContent(place.displayName);
    infoWindow.setContent(content);
    infoWindow.open({
        anchor: marker,
    });
}
Beachten Sie, dass Map und Place vor dieser Funktion deklariert wurden: 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 Vollständiges Beispiel ansehen