Neste documento, você vai aprender a usar a API Nearby Search (New) para criar uma API simples e econômica.
experiência de descoberta local.
Uma experiência de descoberta local mostra aos usuários os principais lugares de interesse próximos a um local especificado quando eles pesquisam um hotel ou uma propriedade. Muitas vezes, consiste em uma mapa interativo, com um painel adicional contendo um seletor de lugar e um galeria de fotos. Você vai encontrar diferentes produtos e recursos da Plataforma Google Maps para melhorar a experiência com interatividade.
Casos de uso
Agora vamos entender quais elementos da integração de descoberta local geram valor para o usuário:
Descoberta: mostre aos usuários uma visão geral do que há em um único local exibindo lugares relevantes de vários tipos.
Interatividade: permite que os usuários selecionem um lugar e atualizem os dados dinamicamente
em relação a esse lugar.
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 ele atende às necessidades deles.
Arquitetura de referência
Descoberta local
Há muitas maneiras de criar uma experiência de descoberta local. O seguinte é um exemplo personalizado de experiência do usuário que aproveita bem conhecidos APIs da Plataforma Google Maps, bem como alguns novos recursos interessantes. Se você quer ter uma abordagem de modelo para a descoberta local, use os componentes da Web.
Aplicativo de amostra
Exemplo de tutorial
Na tabela abaixo, você encontra o aplicativo de exemplo dividido em etapas. e uma descrição da implementação técnica com o Google Maps APIs de plataforma.
1. Pesquisa de local com o preenchimento automático
- Carregue a API Maps JavaScript.
- consulta do Places Autocomplete ou escolha um local no mapa.
2. Mostrar 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ê tiver um hotel, poderá excluir o tipo "lodging" e incluir apenas os tipos adequados, por exemplo: "restaurant, cafe, park, 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. No caso de ZERO resultados, amplie o tamanho do círculo / retângulo antes de mostrar os resultados.
Exemplo de consulta ao reservar um hotel com campos de dados solicitados:
- Básico (
displayName
,types
,openingHours
,formattedAddress
) - Contato (
websiteUri
,nationalPhoneNumber
,internationalPhoneNumber
) - Preferência (
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. Adicione interatividade com o Dynamic Maps e a API Directions
- Percurso e passos atualizados consultando Rotas API. * Use o tempo na próxima seção.
4. Mostrar informações detalhadas do lugar após a interação
Descrição:
displayName
,types
,rating
,userRatingCount
,priceLevel
.Horário: proveniente da consulta anterior da API Directions.
Avaliações:
reviews[i].author
,reviews[i].rating
,reviews[i].text
.Imagens: durante a pré-lançamento irrestrita da API Nearby Search (nova), você vai precisar consultar Detalhes de lugares com
place.id
para receber photo_reference e, em seguida, consultar um de cada vez na sua experiência.
Contagem de consultas e custo associado
- API Maps JavaScript: um mapa no carregamento da experiência.
- API Places Autocomplete: uma consulta para cada caractere digitado (se estiver usando a Preenchimento automático widget), ele pode ser personalizado.
- API Nearby Search (nova): uma consulta a cada 20 lugares exibidos. Faturamento diferente de acordo com o Place dados que fazem parte da resposta da consulta.
- Rotas API: 1 consulta para cada local selecionado pelo usuário.
- API Place Photo: uma consulta para cada foto exibida.
Conclusão
Uma experiência de descoberta local é uma ótima maneira de agregar valor ao usuário. Essa 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 (New).
Próximas etapas
Leitura adicional sugerida:
- Web Components na API Maps JavaScript
- Otimização do Place Autocomplete
- Outros Serviços do Places
- Deixe seu feedback abaixo.
Colaboradores
Principais autores:
Thomas Anglaret | Engenheiro de soluções da Plataforma Google Maps