Migrar para os novos detalhes do lugar

A API Places pode retornar informações detalhadas sobre um local específico. Esta página explica as diferenças entre os detalhes do lugar usados na classe Place (novo) e PlacesService (legado) e fornece alguns snippets de código para comparação. A tabela a seguir lista algumas das principais diferenças no uso dos detalhes do lugar entre a classe Place e PlacesService:

PlacesService (legado) Place (novo)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
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.
Os campos de dados do lugar são formatados usando letras minúsculas. Os campos de dados de lugar são formatados usando letras maiúsculas e minúsculas.
Limitado a um conjunto fixo de tipos de lugar e campos de dados de lugar. Oferece uma seleção ampliada de tipos de lugar e campos de dados de lugar atualizados regularmente.

Comparação de código

Esta seção compara duas partes semelhantes do código 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 em cada API para fazer uma solicitação de detalhes do lugar e, em seguida, usam os dados do lugar resultante para adicionar um marcador ao mapa.

Serviço do Places (legado)

O snippet de código condensado a seguir mostra como fazer uma solicitação de detalhes de lugar usando PlacesService. A solicitação usa um callback e inclui uma verificação condicional necessária em PlacesServiceStatus. Os campos de dados de lugar necessários são especificados no corpo da solicitação.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Saiba mais

Classe Place (nova)

O snippet de código condensado a seguir mostra como fazer uma solicitação de detalhes de lugar usando a classe Place. A solicitação é assíncrona e não inclui uma verificação de status (é possível usar o processamento de erros padrão). Um ID de lugar é usado para criar uma nova instância de Place, que é usada para fazer a solicitação (fetchFields()). Os campos de dados de lugar necessários não são transmitidos até que fetchFields() seja chamado, o que oferece maior flexibilidade. Como o método fetchFields() usa o operador await, ele só pode ser usado dentro de uma função async.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Saiba mais