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

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

PlacesService (heredada) 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 verificación de estado, se puede usar el manejo de errores estándar.
Los campos de datos de Place tienen el formato de escritura en mayúsculas y minúsculas. Los campos de datos de Place tienen el formato de mayúsculas y minúsculas intercaladas.
Se limita a un conjunto fijo de tipos de lugares y campos de datos de lugares. Proporciona una selección expandida de tipos de lugares y campos de datos de lugares actualizados periódicamente.

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 requerido en cada API respectiva para realizar una solicitud de detalles de un lugar y, luego, usan los datos del lugar resultantes para agregar un marcador al mapa.

Servicio de Places (heredado)

En el siguiente fragmento de código condensado, se muestra cómo realizar una solicitud de detalles de un 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 lugares 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 (nueva)

En el siguiente fragmento de código condensado, se muestra cómo realizar una solicitud de detalles de un lugar con la clase Place. La solicitud es asíncrona y no incluye una verificación de estado (se puede usar el manejo de errores estándar). Se usa un ID de lugar para crear una instancia nueva de Place, que se usa para realizar la solicitud (fetchFields()). Los campos de datos de lugares necesarios no se pasan hasta que se llama a fetchFields(), lo que brinda mayor flexibilidad. Debido a 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