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

Desarrolladores del Espacio Económico Europeo (EEE)

Place Photos te permite 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 compararlas.

  • PlacesService (heredado) devuelve 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(), se devuelve la primera foto del lugar de forma predeterminada, si está disponible.
  • La clase Place devuelve 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 diferencias principales en el uso de fotos de lugares entre la clase Place y PlacesService:

PlacesService (heredado) Place (nuevo)
Interfaz PlacePhoto Clase Photo
PlacePhoto devuelve html_attributions como una cadena. Photo devuelve 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 una verificación de estado, se puede usar el manejo de errores estándar. Obtén más información.
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 un 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. En los fragmentos de código, se muestra el código necesario para solicitar fotos de lugares en cada API respectiva.

Servicio Places (heredado)

En el siguiente fragmento, se muestra cómo devolver 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 en este ejemplo no se 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 devuelve las atribuciones de autor requeridas como una cadena html_attributions que contiene una URL que apunta 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 devolver detalles del lugar, incluidos el nombre visible y las fotos del lugar. Primero, se crea una instancia de un objeto Place nuevo con un ID de lugar y, luego, se realiza 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 esto 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 devuelve atribuciones de 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 del 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