Place Details

Selecciona la plataforma: Android iOS JavaScript Servicio web

Campos de recuperación

Si tienes un objeto Place o un ID de lugar existentes, usa el método Place.fetchFields() 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 en 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 Place nuevo; se llama a Place.fetchFields() para solicitar los campos displayName y formattedAddress, se agrega un marcador al mapa y se registran algunos datos en la consola.

TypeScript

async function getPlaceDetails() {
    const { Place } =  await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

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

    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);

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

JavaScript

async function getPlaceDetails() {
  const { Place } = await google.maps.importLibrary("places");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // Log the result
  console.log(place.displayName);
  console.log(place.formattedAddress);

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

index.js
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

Cómo usar el componente Place Overview

El componente Descripción general del lugar muestra información detallada sobre millones de empresas, como el horario de atención, las opiniones con estrellas y las fotos, además de instrucciones sobre cómo llegar y otras acciones en una IU prediseñada en 5 tamaños y formatos. Forma parte de la biblioteca de componentes extendidos de Google Maps Platform, un conjunto de componentes web que ayuda a los desarrolladores a crear mejores mapas y funciones de ubicación más rápido.

Usa el configurador de Descripción general de lugares para crear código incorporable para un componente personalizado de Descripción general de lugares y, luego, expórtalo para usarlo con frameworks populares, como React y Angular, o sin ningún framework.