Migrar para o novo Place Photos

Desenvolvedores do Espaço Econômico Europeu (EEE)

Com o recurso Place Photo, você adiciona fotos de alta qualidade às suas páginas da Web. Nesta página, explicamos as diferenças entre os recursos de fotos de lugares nas classes Place (nova) e PlacesService (legada) e fornecemos 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 de PlacesServiceStatus. Nenhuma verificação de status necessária, pode usar o tratamento de erros padrão. Saiba mais.
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 de página.

Comparação de código

Esta seção compara o código das fotos de lugares para ilustrar as diferenças entre o serviço 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 é mostrada na página depois de verificar o status do serviço. Ao instanciar o PlacesService, um mapa ou um elemento div precisa ser especificado. Como este exemplo não apresenta 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 autor necessárias como uma string html_attributions que contém um URL apontando para a página do perfil do Google do autor. O snippet a seguir 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 primeira foto do lugar é mostrada na página. Não é necessário verificar o status do serviço ao usar a classe Place, já que isso é feito 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ções de autor na classe Place

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