Detalhes do lugar (novo)

Selecione a plataforma: Android iOS JavaScript Web Service
Desenvolvedores do Espaço Econômico Europeu (EEE)

Buscar campos

Se você já tem um objeto Place ou um ID de lugar, use o método Place.fetchFields() para ver detalhes sobre o local. Forneça uma lista separada por vírgulas de campos de dados de lugar para retornar. Especifique os nomes dos campos com letras concatenadas. Use o objeto Place retornado para receber dados dos campos solicitados.

O exemplo a seguir usa um ID de lugar para criar um novo Place, chama Place.fetchFields() solicitando os campos displayName e formattedAddress, adiciona um marcador ao mapa e registra alguns dados no console.

TypeScript

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

    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}

JavaScript

async function getPlaceDetails() {
    const { Place } = await google.maps.importLibrary("places");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });
    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
Observe que Map e Place foram declarados antes dessa função:
const { Map } = await google.maps.importLibrary("maps");
const { Place } = await google.maps.importLibrary("places");
Confira o exemplo completo

Usar o componente Visão geral do lugar

O componente "Visão geral do lugar" mostra informações detalhadas sobre milhões de empresas, incluindo horário de funcionamento, avaliações por estrelas e fotos, além de rotas e outras ações em uma interface pré-criada em cinco tamanhos e formatos. Ela faz parte da Biblioteca de componentes estendidos da Plataforma Google Maps, um conjunto de componentes da Web que ajuda os desenvolvedores a criar mapas melhores e recursos de localização com mais rapidez.

Use o configurador de visão geral do lugar para criar um código incorporável para um componente personalizado de visão geral do lugar e exporte-o para usar com frameworks conhecidos, como React e Angular, ou sem nenhum framework.