Classe Place (visualização)

Visão geral

A classe Place fornece uma API mais simples para usar a biblioteca Places e a API Maps JavaScript, além de ser compatível com padrões de uso modernos, como objetos promessa.

Comece agora

Gerar uma chave de API e ativar as APIs necessárias

Antes de usar a visualização da classe Place, você precisa de um projeto do Cloud com uma conta de faturamento, além de ativar também as APIs Maps JavaScript e Places. Siga as instruções para Ativar uma ou mais APIs ou SDKs. As duas APIs precisam estar ativadas no mesmo projeto no console do Cloud.

Carregar a biblioteca Places

Para usar a funcionalidade da biblioteca Places, é preciso carregá-la usando o parâmetro libraries no URL de carregamento do script da API Maps JavaScript. Para essa visualização, também é necessário especificar v=beta.

<script async
  src="https://maps.googleapis.com/maps/api/js?v=beta&key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>

Encontrar um lugar por consulta de texto

Chame findPlaceFromQuery para encontrar um lugar por consulta de texto. Use o parâmetro fields para especificar uma lista separada por vírgulas de um ou mais campos de dados de lugar com letras concatenadas. Use fields: ['*'] para retornar todos os dados de um lugar (somente para testes, não recomendado em um ambiente real).

O exemplo a seguir mostra o uso de um padrão async/await para chamar findPlaceFromQuery e mostrar os resultados em um mapa.

let map: google.maps.Map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: centerCoordinates,
        zoom: 14,
        // ...
    });

    findPlace();
}

async function findPlace() {
    const request = {
        query: 'Sports Page',
        fields: ['displayName', 'location'],
        locationBias: centerCoordinates,
    };

    const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

    if (places.length) {
        const place = places[0];
        const location = place.location as google.maps.LatLng;
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });

        map.setCenter(location);

    } else {
        console.log('No results');
    }
}
index.ts

let map;
let centerCoordinates = { lat: 37.4161493, lng: -122.0812166 };

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: centerCoordinates,
    zoom: 14,
    // ...
  });
  findPlace();
}

async function findPlace() {
  const request = {
    query: "Sports Page",
    fields: ["displayName", "location"],
    locationBias: centerCoordinates,
  };
  const { places } = await google.maps.places.Place.findPlaceFromQuery(request);

  if (places.length) {
    const place = places[0];
    const location = place.location;
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    map.setCenter(location);
  } else {
    console.log("No results");
  }
}
index.js

Encontrar um lugar pelo número de telefone

Ligue para findPlaceFromPhoneNumber e encontre um lugar pelo número de telefone. Os números de telefone precisam estar no formato internacional (com um sinal de adição "+" como prefixo, seguido pelo código do país e telefone. Consulte Recomendação E.164 ITU para mais informações. Use o parâmetro fields para especificar uma lista separada por vírgulas de um ou mais campos de dados de lugar com letras concatenadas. Use fields: ['*'] para retornar todos os dados de um lugar (somente para testes, não recomendado em um ambiente real).

O exemplo a seguir mostra o uso de um padrão async/await para chamar findPlaceFromPhoneNumber e mostrar os resultados em um mapa.

async function findPlaceByPhone() {
    const request = {
        phoneNumber: '+1(206)787-5388',
        fields: ['displayName', 'location'],
    }

    const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(request);

    if (places.length) {
        const place = places[0];
        const markerView = new google.maps.marker.AdvancedMarkerView({
            map,
            position: place.location,
            title: place.displayName,
        });
        console.log(place.displayName);
    } else {
        console.log('No results');
    }
}
index.ts

async function findPlaceByPhone() {
  const request = {
    phoneNumber: "+1(206)787-5388",
    fields: ["displayName", "location"],
  };
  const { places } = await google.maps.places.Place.findPlaceFromPhoneNumber(
    request
  );

  if (places.length) {
    const place = places[0];
    const markerView = new google.maps.marker.AdvancedMarkerView({
      map,
      position: place.location,
      title: place.displayName,
    });

    console.log(place.displayName);
  } else {
    console.log("No results");
  }
}

window.initMap = initMap;
index.js

Usar o Place Details

Se você já tem um objeto Place ou um ID de lugar, chame Place.fetchFields para ver mais detalhes do local. Use o parâmetro fields para especificar uma lista separada por vírgulas de um ou mais campos de dados de lugar com letras concatenadas. Use fields: ['*'] para retornar todos os campos de dados (somente para testes, não recomendado em um ambiente real).

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

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

    // Show the result
    console.log(place.displayName);
    console.log(place.formattedAddress);
}
index.ts

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

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({ fields: ["displayName", "formattedAddress"] });
  // Show the result
  console.log(place.displayName);
  console.log(place.formattedAddress);
}
index.js

Campos de dados de lugar

Os campos correspondem aos resultados do Place Details e são divididos em três categorias de faturamento: "Basic", "Contact" e "Atmosphere". Os campos "Basic" são faturados de acordo com a taxa básica e não geram cobranças extras. Os campos "Contact" e "Atmosphere" são faturados a uma taxa maior. Consulte a tabela de preços para mais informações. As atribuições (html_attributions) são sempre retornadas a cada chamada, tendo sido solicitadas ou não.

A classe Place é compatível com os seguintes campos:

Basic Data

Campos de dados do contato

Campos de dados de ambiente