Place Details (nuevo)

Selecciona la plataforma: Android iOS JavaScript Servicio web
Desarrolladores del Espacio Económico Europeo (EEE)

Objeto Place

El objeto Place, que contiene información sobre un lugar, se muestra de forma dinámica en Text Search, Nearby Search y Place Autocomplete. También puedes crear un objeto Place a partir de un ID de lugar o un nombre de recurso (el nombre de recurso es el ID de lugar con el prefijo places/). En el siguiente fragmento, se muestra cómo crear un objeto Place con un ID de lugar: 

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

También puedes crear un objeto Place a partir de un nombre de recurso de lugar: 

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

Para obtener más información, consulta PlaceOptions.

Cómo recuperar campos

Si tienes un objeto Place existente, o un ID de lugar o un nombre de recurso, usa el Place.fetchFields() método para obtener detalles sobre ese lugar. Proporciona una lista separada por comas de los campos de datos de lugar que se mostrarán; especifica los nombres de los campos con mayúsculas mediales. Usa el objeto Place devuelto para obtener datos de los campos solicitados.

En el siguiente ejemplo, se usa un ID de lugar para crear un nuevo Place, se llama a Place.fetchFields() para solicitar los campos displayName y formattedAddress, y se agrega un marcador al mapa.

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,
    });
}
Ten en cuenta que Map y Place se declararon antes de esta función: 
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
 Ver el ejemplo completo