Migrar para o novo Place Photos

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

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

  • PlacesService (legado) retorna uma matriz de até 10 PlacePhoto objetos 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 Photo objetos 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)
PlacePhoto interface Photo classe
PlacePhoto retorna html_attributions como uma string. Photo retorna uma instância AuthorAttribution.
Os métodos exigem o uso de um callback para processar o objeto de resultados e google.maps.places.PlacesServiceStatus resposta. Usa Promises 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.
PlacesService precisa ser instanciado usando um mapa ou um elemento div. Place pode ser instanciado onde for 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 de 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 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, juntamente com os 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, 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 autor no PlacesService

O PlacesService retorna as atribuições de autor necessárias como uma html_attributions string que contém um URL que aponta para a página do perfil do Google do autor. O snippet a seguir mostra como recuperar 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 fetchFields() método 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 é 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çõ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 autor no Google e um URI para a foto do perfil do autor. O snippet a seguir 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