Migrar para o novo Place Photos

Com o recurso Place Photo, você adiciona conteúdo fotográfico de alta qualidade às suas páginas da Web. Esta página explica as diferenças entre os recursos de fotos de lugares na classe Place (nova) e PlacesService (legado) e fornece alguns snippets de código para comparação.

  • PlacesService (legado) retorna uma matriz de até 10 objetos PlacePhoto como parte do objeto PlaceResult para qualquer solicitação getDetails() se o campo photos for especificado na solicitação. No caso de textSearch() e nearbySearch(), a primeira foto do lugar é retornada por padrão, se disponível.
  • A classe Place retorna uma matriz de até 10 objetos Photo como parte de uma solicitação fetchFields() se o campo photos for especificado na solicitação.

A tabela a seguir lista algumas das principais diferenças no uso de fotos de lugares entre a classe Place e PlacesService:

PlacesService (legado) Place (novo)
Interface PlacePhoto Classe Photo
PlacePhoto retorna html_attributions como uma string. Photo retorna uma instância de AuthorAttribution.
Os métodos exigem o uso de um callback para processar o objeto de resultados e a resposta google.maps.places.PlacesServiceStatus. Usa promessas e funciona de forma assíncrona.
Os métodos exigem uma verificação PlacesServiceStatus. Nenhuma verificação de status necessária. É possível usar o tratamento de erros padrão.
PlacesService precisa ser instanciado usando um mapa ou um elemento div. Place pode ser instanciado sempre que necessário, sem uma referência a um mapa ou elemento da página.

Comparação de código

Esta seção compara o código de fotos de lugares para ilustrar as diferenças entre o serviço do Places e a classe Place. Os snippets de código mostram o código necessário para solicitar fotos de lugares em cada API.

Serviço do Places (legado)

O snippet a seguir mostra como retornar fotos usando PlacesService e exibir o primeiro resultado de foto na página. Neste exemplo, a solicitação de detalhes do lugar especifica um ID de lugar, além dos campos name e photos. A primeira foto é exibida na página após a verificação do status do serviço. Ao instanciar o PlacesService, é necessário especificar um mapa ou um elemento div. Como este exemplo não tem um mapa, um elemento div é usado.

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});
    }
  });
}

Atribuições de autoria em PlacesService

O PlacesService retorna as atribuições de autoria necessárias como uma string html_attributions que contém um URL que aponta para a página de perfil do autor no Google. O snippet abaixo mostra a recuperação de dados de atribuição para o primeiro resultado de foto.

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

Saiba mais

Classe Place (nova)

O snippet a seguir mostra como usar o método fetchFields() para retornar detalhes do lugar, incluindo o nome de exibição e as fotos do lugar. Primeiro, um novo objeto Place é instanciado usando um ID de lugar, seguido por uma chamada para fetchFields(), em que os campos displayName e photos são especificados. A foto do primeiro lugar é exibida na página. Não é necessário verificar o status do serviço ao usar a classe Place, porque isso é processado automaticamente.

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});
}

Atribuição de autor na classe Place

A classe Place retorna atribuições de autoria como uma instância de AuthorAttribution, incluindo o nome do autor, um URI para a página de perfil do Google do autor e um URI para a foto do perfil do autor. O snippet abaixo mostra como recuperar dados de atribuição para o primeiro 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;

Saiba mais