Esta seção aborda as opções que você pode definir em uma instância LocalContextMapView
e o Map
interno contido no LocalContextMapView
. Ao criar uma nova instância de LocalContextMapView
, especifique até 10 tipos de lugar e um número máximo de lugares para retornar (até 24). O Map
interno é compatível com as mesmas MapOptions como um Map
padrão da API Maps JavaScript.
É possível atualizar as propriedades de pesquisa do Contexto local
a qualquer momento depois que a Biblioteca do Contexto local é inicializada. A atualização de maxPlaceCount
, placeTypePreferences
,
locationRestriction
or locationBias
aciona automaticamente uma nova pesquisa.
Especificar tipos de lugar
Você pode especificar até 10 tipos de lugar que a Biblioteca do Contexto local precisa retornar. Especifique tipos de lugar usando a propriedade placeTypePreferences
e transmitindo um ou mais tipos, como mostrado no exemplo a seguir:
placeTypePreferences: ['restaurant', 'cafe']
Ponderação de tipos de lugar
Também é possível atribuir um peso relativo a cada tipo especificado, o que faz com que os tipos com um valor de ponderação maior apareçam com mais frequência. O peso é um parâmetro opcional avançado que deve ser usado apenas conforme necessário. Quando esse parâmetro é omitido, a Biblioteca do Contexto local determina os pesos padrão, que podem mudar e melhorar ao longo do tempo.
Você pode atribuir um peso relativo a cada propriedade usando o atributo
weight
. O exemplo a seguir mostra a ponderação dos tipos de lugar especificados para retornar o dobro dos resultados de restaurant
e cafe
em comparação com primary_school
:
placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]
Os resultados variam dependendo do tipo de lugar em uma determinada área. Por exemplo, atribuir um peso de 10 a shopping_mall
não terá efeito se não houver shopping centers na área.
Definir a contagem máxima de lugares
Para definir o número máximo de lugares (até 24) que a Biblioteca do Contexto local
precisa retornar, use a propriedade maxPlaceCount
, como mostrado aqui:
maxPlaceCount: 12
Definir a restrição de local
Por padrão, as pesquisas são vinculadas à janela de visualização do mapa. É possível especificar um conjunto de limites para restringir os resultados da pesquisa a uma área maior ou menor. Para incluí-lo, defina a propriedade locationRestriction
do LocalContextMapView
como o LatLngBounds
desejado. Esse valor pode ser maior ou menor do que a janela de visualização do mapa.
Confira um exemplo.
Ativar rotas
Para ativar as rotas no mapa, defina a propriedade directionsOptions
de
LocalContextMapView
, transmitindo um literal de objeto LatLng
do ponto de origem (o destino é determinado pelo lugar selecionado no momento). Se um ponto de origem não for transmitido, as rotas serão desativadas. O exemplo a seguir mostra a definição de um ponto de origem para ativar as rotas a pé em um mapa:
directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},
O tamanho da janela de visualização do mapa, como definido pelos limites do mapa e pelo nível de zoom, influencia diretamente as distâncias que podem ser retornadas de um determinado ponto de origem. Por exemplo, se a janela de visualização estiver definida para mostrar uma área de 160 quilômetros de largura, é possível que pontos de interesse apareçam a até 80 km do ponto de origem. Para que seu app retorne rotas a pé com distâncias razoáveis, você pode fazer o seguinte:
- Desative as rotas a pé em níveis de zoom menores (geralmente abaixo do nível de zoom 16).
- Defina um
locationRestriction
usando uma área com limites menores. Dessa forma, os pontos de interesse não vão aparecer em lugares fora da área de restrição.
Alterar a origem das rotas
É possível mudar o valor da propriedade directionsOptions
a qualquer momento
durante o ciclo de vida do LocalContextMapView
. Veja no exemplo a seguir a definição de um novo valor para directionsOptions
:
localContextMapView.directionsOptions = {
origin: {lat: 47.6532809, lng: -122.3512206},
};
ou
localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};
Definir o layout e a visibilidade
Você pode definir a posição inicial do layout e as opções de visibilidade dos detalhes e do seletor de lugar, definindo as propriedades placeChooserViewSetup
e placeDetailsViewSetup
de LocalContextMapView
. Também é possível ocultar a visualização de detalhes do lugar de maneira programática.
Definir a posição do layout do seletor de lugar
Você pode definir a posição do layout do seletor de lugar ao inicializar o LocalContextMapView
. A posição do layout é relativa à direção do documento
e varia dependendo de o app ser da esquerda para a direita (LTR)
ou da direita para a esquerda (RTL).
Há três opções de layout para o seletor de lugar:
INLINE_START
define o seletor de lugar para exibição no INÍCIO do fluxo de conteúdo (lado esquerdo do mapa para LTR, à direita para RTL).INLINE_END
define o seletor de lugar para exibição no FINAL do fluxo de conteúdo (lado direito do mapa para LTR, à esquerda para RTL).BLOCK_END
define o seletor de lugar para exibição na PARTE DE BAIXO da página (é o mesmo para LTR e RTL).
Ao definir a posição do seletor de lugar como INLINE_START
ou INLINE_END
, você sempre precisa definir a posição da visualização de detalhes do lugar como o mesmo valor.
Também é possível definir a visualização de detalhes do lugar para exibição em uma janela de informações.
Para BLOCK_END
, o modo de layout de visualização de detalhes do lugar precisa ser SEMPRE definido como INFO_WINDOW
.
A Biblioteca do Contexto local muda de forma responsiva a posição do seletor de lugar com base no tamanho renderizado do LocalContextMapView
. Por padrão, em um LocalContextMapView
maior, o seletor de lugar aparece no início do fluxo de conteúdo (à esquerda do mapa para a LTR, à direita para o RTL). Em um LocalContextMapView
menor (por exemplo, em um dispositivo móvel), o padrão muda para mostrar o seletor de lugar na parte de baixo do mapa e mostra detalhes do lugar em uma janela de informações. O nível de zoom do navegador afeta as dimensões do pixel em que a posição do seletor de lugar muda entre as laterais e a parte de baixo (o limite aumenta proporcionalmente com o nível de zoom).
Recomendamos o uso de chamadas de função para configurar a posição padrão do seletor de lugar. A declaração direta desses valores substitui todas as mudanças de layout responsivas.
Mostrar o seletor de lugar no início do fluxo de conteúdo
Para definir o seletor de lugar que aparece no início do fluxo de conteúdo (à esquerda do mapa para LTR, à direita para RTL), defina position
como INLINE_START
para placeChooserViewSetup
e placeDetailsViewSetup
, como mostrado no exemplo a seguir:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_START'};
}
},
});
Mostrar o seletor de lugar no final do fluxo de conteúdo
Para definir o seletor de lugar que aparece no fim do fluxo de conteúdo (à direita para LTR, à esquerda para RTL), defina o position
como INLINE_END
para placeChooserViewSetup
e placeDetailsViewSetup
, como mostrado no exemplo a seguir:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'INLINE_END'};
}
},
});
Mostrar o seletor de lugar na parte inferior
Para definir o seletor de lugar a ser mostrado na parte de baixo do mapa, defina o position
do placeChooserViewSetup
como BLOCK_END
e o layoutMode
do placeDetailsViewSetup
como INFO_WINDOW
, como mostrado no exemplo a seguir:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
// ...
placeChooserViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {position: 'BLOCK_END'};
}
},
placeDetailsViewSetup: ({defaultLayoutMode}) => {
if (defaultLayoutMode === 'SHEET') {
return {layoutMode: 'INFO_WINDOW'};
}
},
});
Ocultar o seletor de lugar
O seletor de lugar fica visível por padrão. Para ocultar o seletor de lugar, defina layoutMode
como HIDDEN
, como mostrado no exemplo a seguir:
placeChooserViewSetup: {layoutMode: 'HIDDEN'},
O exemplo a seguir mostra como ocultar o seletor de lugar quando a posição padrão muda para BLOCK_END
:
const localContextMapView = new google.maps.localContext.LocalContextMapView({
placeChooserViewSetup: ({defaultPosition}) => {
if (defaultPosition === 'BLOCK_END') {
return {layoutMode: 'HIDDEN'};
}
},
});
Mostrar a visualização do Place Details em uma janela de informações
Para que a visualização de detalhes do lugar apareça em uma janela de informações, defina layoutMode
como INFO_WINDOW
, como mostrado no exemplo a seguir:
placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},
É possível usar essa configuração com qualquer posição do seletor de lugar (esquerda, direita ou na parte de baixo).
Ocultar a visualização de detalhes do lugar de maneira programática
Você pode ocultar programaticamente a visualização de detalhes do lugar chamando
hidePlaceDetailsView()
em uma instância de LocalContextMapView
, como mostrado no
exemplo a seguir:
localContextMapView.hidePlaceDetailsView()
Por padrão, clicar no mapa oculta a visualização de detalhes do lugar. Defina a opção hidesOnMapClick
no placeDetailsViewSetup
como false
para evitar esse comportamento padrão.
// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: {hidesOnMapClick: false},
});
Para ocultar a janela de informações do lugar apenas quando o mapa é clicado, você pode controlar condicionalmente a configuração do valor hidesOnMapClick
, como mostrado no exemplo a seguir:
// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
...
placeDetailsViewSetup: ({defaultLayoutMode}) => {
return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
},
});
Definir opções internas do Map
Quando você tiver uma instância de LocalContextMapView
, defina as opções de mapa
na instância interna do Map
. O Map
contido por um LocalContextMapView
é compatível com as mesmas opções de um mapa da API Maps JavaScript padrão. O exemplo a seguir mostra a criação de uma nova instância de LocalContextMapView
e a configuração de algumas opções no Map
interno:
// Instantiate LocalContextMapView.
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.querySelector('#map'),
placeTypePreferences: ['restaurant'],
maxPlaceCount: 12,
});
// Set inner map options.
localContextMapView.map.setOptions({
center: pos,
zoom: 14,
mapTypeId: 'satellite',
});
}