Neste documento, você verá como usar a API Nearby Search (novo) para criar um modelo simples e econômico
de descoberta local.
Uma experiência de descoberta local mostra aos usuários os principais lugares de interesse perto de um local que você especificar ao pesquisar um hotel ou uma imobiliária. Muitas vezes, consiste em uma mapa interativo, com um painel adicional contendo um seletor de lugar e um galeria de fotos. Você verá diferentes plataformas produtos e recursos para melhorar a experiência com interatividade.
Casos de uso
Agora vamos entender quais elementos da integração de descoberta local motivam o usuário :
Descoberta: ofereça aos usuários uma visão geral do que há em volta de um único local. mostrando locais relevantes de vários tipos.
Interatividade: permita que os usuários selecionem um lugar e atualizem os dados dinamicamente.
em relação àquele lugar.
Visualização - Forneça avaliações e fotos de lugares
e o tempo de caminhada para que os usuários entendam rapidamente se às necessidades da empresa.
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ê quiser ter um modelo de abordagem para descoberta local, use Web Componentes.
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 local AutocompleteSearch
- Carregue a API Maps JavaScript.
- consulta do Places Autocomplete ou escolha o 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ê for um hotel, poderá excluir do tipo "lodging" e incluir apenas tipos adequados, por exemplo: "restaurante, café, parque, tourit_attraction".- Aproveite
includedPrimaryTypes
,excludedPrimaryTypes
para aproveitar ainda mais controle sobre os resultados. - `locationRestriction para evitar número insuficiente de resultados ou muito longe lugares; no caso de ZERO resultados, aumente o tamanho do círculo / retângulo antes para exibir os resultados.
Exemplo de consulta ao reservar um hotel com 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. 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
ereviews[i].text
.Images: durante a prévia irrestrita da API Nearby Search (nova), você terá que consultar Places Detalhes com
place.id
para ter photo_reference para consultar uma de cada vez na experiência
Contagem de consultas e custo associado
- JavaScript do Google Maps API: 1 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.
- Nearby Search (novo) API: 1 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.
- Foto de lugar API: 1 consulta para cada foto exibida.
Conclusão
Uma experiência de descoberta local é uma ótima maneira de agregar valor ao usuário. Isso implementação de demonstração tem muitos recursos que você provavelmente vai incluir ao criando essa experiência na Plataforma Google Maps com recursos especiais da API Nearby Search (novo)
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
Autores principais:
Thomas Anglaret | No Google Maps Engenheiro de soluções da plataforma