Cómo migrar a la nueva función Detalles del lugar

Desarrolladores del Espacio Económico Europeo (EEE)

La API de Places puede devolver información detallada sobre un lugar específico. En esta página, se explican las diferencias entre los detalles del lugar que se usan en la clase Place (nueva) y PlacesService (heredada), y se proporcionan algunos fragmentos de código para realizar comparaciones. En la siguiente tabla, se enumeran algunas de las principales diferencias en el uso de los detalles del lugar entre la clase Place y PlacesService:

PlacesService (heredado) Place (Nuevo)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
Los métodos requieren el uso de una devolución de llamada para controlar el objeto de resultados y la respuesta de google.maps.places.PlacesServiceStatus. Usa promesas y funciona de forma asíncrona.
Los métodos requieren una verificación de PlacesServiceStatus. No se requiere una verificación de estado. Se puede usar el control de errores estándar. Obtén más información.
Los campos de datos de lugar tienen el formato snake case. Los campos de datos de lugar se formatean con camel case.
Se limita a un conjunto fijo de tipos de lugares y campos de datos de lugares. Proporciona una selección ampliada de tipos de lugares y campos de datos de lugares que se actualizan con regularidad.

Comparación de código

En esta sección, se comparan dos fragmentos de código similares para ilustrar las diferencias entre el servicio de Places y la clase Place. Los fragmentos de código muestran el código necesario en cada API respectiva para realizar una solicitud de detalles del lugar y, luego, usar los datos del lugar resultantes para agregar un marcador al mapa.

Servicio Places (heredado)

En el siguiente fragmento de código condensado, se muestra cómo realizar una solicitud de detalles de lugar con PlacesService. La solicitud usa una devolución de llamada y, además, incluye una verificación condicional obligatoria en PlacesServiceStatus. Los campos de datos de lugar necesarios se especifican en el cuerpo de la solicitud.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Más información

Clase Place (nuevo)

En el siguiente fragmento de código condensado, se muestra cómo realizar una solicitud de detalles de lugar con la clase Place. La solicitud es asíncrona y no incluye una verificación de estado (se puede usar el control de errores estándar). Se usa un ID de lugar para crear una instancia de Place nueva, que se usa para realizar la solicitud (fetchFields()). Los campos de datos de lugar necesarios no se pasan hasta que se llama a fetchFields(), lo que brinda mayor flexibilidad. Dado que el método fetchFields() usa el operador await, solo se puede usar dentro de una función async.

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

  // Call fetchFields, passing the needed 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 google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Más información