Neste documento, você vai aprender a usar a API Nearby Search (nova) para criar uma experiência simples e econômica
experiência de descoberta local.
Uma experiência de descoberta local mostra aos usuários os principais lugares de interesse perto de um local especificado ao pesquisar um hotel ou imóveis. Geralmente, ele consiste em um mapa interativo, com um painel extra contendo um seletor de lugar e uma galeria de fotos. Você verá diferentes produtos e recursos da Plataforma Google Maps para aprimorar a experiência com interatividade.
Casos de uso
Agora vamos entender quais elementos da integração da descoberta local geram valor para o usuário:
Descoberta: ofereça aos usuários uma visão geral do que há em torno de um único local mostrando locais relevantes de vários tipos.
Interatividade: ajude os usuários a selecionar um lugar e atualizar os dados dinamicamente.
em relação a esse local.
Visualização: forneça avaliações e fotos de lugares
e o tempo e a distância de caminhada para que os usuários entendam rapidamente se isso atende às necessidades.
Arquitetura de referência
Descoberta local
Há muitas maneiras de criar uma experiência de descoberta local. A integração a seguir é um exemplo personalizado de uma experiência do usuário que aproveita as APIs conhecidas da Plataforma Google Maps, além de alguns novos recursos interessantes. Se você quiser ter uma abordagem baseada em modelo para descoberta local, use os Web Components.
Aplicativo de amostra
Exemplo de tutorial
Na tabela abaixo, você encontra o aplicativo de exemplo dividido em etapas com uma descrição da implementação técnica com as APIs da Plataforma Google Maps.
1. Pesquisa de local com AutocompleteSearch de local
- Carregue a API Maps JavaScript.
- Places Autocomplete ou escolha um local no mapa.
2. Mostre pontos de interesse locais usando a API Nearby Search (nova)
- Classificação de popularidade (resultados mais relevantes) ou Classificação de distância.
includedTypes
,excludedTypes
. Se você for um hotel, poderá excluir o tipo "hospedagem" e incluir apenas os tipos adequados, por exemplo: "restaurante, café, parque, tourit_attraction".- Use
includedPrimaryTypes
eexcludedPrimaryTypes
para ter ainda mais controle sobre os resultados. - "locationRestriction" para evitar um número insuficiente de resultados ou lugares muito distantes. Caso ZERO resultados, amplie o tamanho do círculo / retângulo antes de exibir os resultados.
Exemplo de consulta ao reservar um hotel com os campos de dados solicitados:
- Básico (
displayName
,types
,openingHours
,formattedAddress
) - Contato (
websiteUri
,nationalPhoneNumber
,internationalPhoneNumber
) - Preferencial (
reviews
,priceLevel
,userRatingCount
)
{ "includedTypes": ["restaurant","cafe","park"], "excludedTypes": ["lodging","convenience_store"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
Exemplo de consulta ao pesquisar um imóvel com campos de dados solicitados:
- Básico (
displayName
,types
,openingHours
,formattedAddress
)
{ "includedTypes": ["school","transport","bus","convenience_store"], "excludedTypes": ["lodging"], "includedPrimaryTypes": ["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes": ["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": { "center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }
3. Aumente a interatividade com o Dynamic Maps e a API Directions
- Consulte a API Directions e atualize o trecho e as etapas. * Use a hora na próxima seção.
4. Mostrar informações detalhadas do lugar na interação
Descrição:
displayName
,types
,rating
,userRatingCount
,priceLevel
Hora: originada da consulta anterior da API Directions.
Avaliações:
reviews[i].author
,reviews[i].rating
ereviews[i].text
.Imagens: durante a Visualização irrestrita da API Nearby Search (nova), você precisará consultar Detalhes do lugar com
place.id
para acessar photo_reference e consultar um por vez durante sua experiência.
Contagem de consultas e custo associado
- API Maps JavaScript: um mapa ao carregar a experiência.
- API Places Autocomplete: uma consulta para cada caractere digitado (se você estiver usando o widget Autocomplete), ela pode ser personalizada.
- API Nearby Search (nova): uma consulta a cada 20 lugares mostrados. Faturamento diferente de acordo com os dados de lugar que fazem parte da resposta da consulta.
- API Directions: uma consulta cada lugar selecionado pelo usuário.
- API Place Photo: uma consulta a cada foto mostrada.
Conclusão
Uma experiência de descoberta local é uma forma eficiente de agregar valor ao usuário. Esta implementação de demonstração tem muitos recursos que você provavelmente vai incluir ao criar essa experiência na Plataforma Google Maps com recursos especiais da API Nearby Search (nova) .
Próximas etapas
Leitura adicional sugerida:
- Web Components na API Maps JavaScript
- Otimização do Places Autocomplete
- Outros serviços do Places
- Deixe seu feedback abaixo.
Colaboradores
Autores principais:
Thomas Anglaret, engenheiro de soluções da Plataforma Google Maps