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 Place Photos en la Place clase (nueva) y PlacesService (heredada), y se proporcionan algunos fragmentos de código para la comparación.

  • PlacesService (heredada) muestra un array de hasta 10 PlacePhoto objetos como parte del objeto PlaceResult para cualquier solicitud getDetails() si el campo photos se especifica 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 Photo objetos como parte de una solicitud fetchFields() si el campo photos se especifica 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 (nueva)
PlacePhoto interfaz Photo clase
PlacePhoto devuelve 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 google.maps.places.PlacesServiceStatus respuesta. Usa Promises 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.
PlacesService se debe crear una instancia con un mapa o un elemento div. Place se puede crear una instancia de 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. Los fragmentos de código muestran el código necesario para solicitar fotos de lugares en cada API respectiva.

Servicio de 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. 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

The PlacesService returns the required author attributions as an html_attributions string containing a URL pointing to the author's Google profile page. En el siguiente fragmento, se muestra cómo recuperar datos de atribución para el primer resultado de la foto.

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

Obtén más información

Clase Place (nueva)

En el siguiente fragmento, se muestra cómo usar el fetchFields() método para mostrar los 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 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 muestra las atribuciones de autor como una instancia 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 datos de atribución para el 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;

Obtén más información