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

Desarrolladores del Espacio Económico Europeo (EEE)

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 las clases Place (nueva) y PlacesService (heredada), y se proporcionan algunos fragmentos de código para realizar comparaciones.

  • PlacesService (legado) 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 muestra de forma predeterminada la primera foto del lugar, si está disponible.
  • La clase Place devuelve un array de hasta 10 objetos Photo como parte de una solicitud de 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 fotos de lugares entre la clase Place y PlacesService:

PlacesService (heredado) Place (Nuevo)
Interfaz de 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 control de errores estándar.
Se debe crear una instancia de PlacesService con un mapa o un elemento div. Place se puede crear una instancia 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 Places Service 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 devolver fotos con PlacesService y mostrar el primer resultado de la foto en la página. En este ejemplo, la solicitud de detalles del lugar 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. Dado que 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

El método 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 los datos de atribución del primer resultado de la 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, seguido de una llamada a fetchFields() en la que se especifican los campos displayName y photos. Luego, se muestra la foto del primer 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 del 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 la 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