Cómo migrar a la nueva función Place Photos

Las fotos de lugares te permiten agregar contenido fotográfico de alta calidad a tus páginas web. En esta página, se explican las diferencias entre las funciones de fotos de lugares en la clase Place (nueva) y PlacesService (heredada), y se proporcionan algunos fragmentos de código para la comparación.

  • PlacesService (heredado) muestra un array de hasta 10 objetos PlacePhoto como parte del objeto PlaceResult para cualquier solicitud de getDetails() si se especifica el campo photos en la solicitud. En el caso de textSearch() y nearbySearch(), la primera foto del lugar se muestra de forma predeterminada si está disponible.
  • La clase Place muestra un array de hasta 10 objetos Photo como parte de una solicitud fetchFields() si se especifica el campo photos en la solicitud.

En la siguiente tabla, se enumeran algunas de las principales diferencias en el uso de las fotos de lugares entre la clase Place y PlacesService:

PlacesService (heredada) Place (nuevo)
Interfaz de PlacePhoto Clase Photo
PlacePhoto muestra html_attributions como una cadena. Photo muestra una instancia de AuthorAttribution.
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.
Se debe crear una instancia de PlacesService con un mapa o un elemento div. Se puede crear una instancia de Place donde sea necesario, sin una referencia a un mapa o elemento de página.

Comparación de código

En esta sección, se compara el código de las fotos de lugares para ilustrar las diferencias entre el servicio de Places y la clase Place. Los fragmentos de código muestran el código necesario para solicitar fotos de lugares en cada API respectiva.

Servicio Places (heredado)

En el siguiente fragmento, se muestra cómo mostrar fotos con PlacesService y mostrar el primer resultado de foto en la página. En este ejemplo, la solicitud de Place Details especifica un ID de lugar, junto con los campos name y photos. Luego, se muestra la primera foto en la página después de verificar el estado del servicio. Cuando se crea una instancia de PlacesService, se debe especificar un mapa o un elemento div. Como este ejemplo no incluye un mapa, se usa un elemento div.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Atribuciones de autor en PlacesService

PlacesService muestra las atribuciones de autor requeridas como una cadena html_attributions que contiene una URL que dirige a la página de perfil de Google del autor. En el siguiente fragmento, se muestra cómo recuperar datos de atribución para el primer resultado de foto.

let attributionUrl = place.photos[0].html_attributions;

Más información

Clase Place (nueva)

En el siguiente fragmento, se muestra cómo usar el método fetchFields() para mostrar los detalles de un lugar, incluidos el nombre visible y las fotos del lugar. Primero, se crea una instancia de un nuevo objeto Place con un ID de lugar, seguido de una llamada a fetchFields() en la que se especifican los campos displayName y photos. Luego, se muestra la primera foto del lugar en la página. No es necesario verificar el estado del servicio cuando se usa la clase Place, ya que se controla automáticamente.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

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

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Atribuciones de autor en la clase Place

La clase Place muestra las atribuciones del autor como una instancia de AuthorAttribution, que incluye el nombre del autor, un URI para la página de perfil de Google del autor y un URI para la foto de perfil del autor. En el siguiente fragmento, se muestra cómo recuperar los datos de atribución para el primer resultado de foto.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Más información