Configurar as opções de Contexto local e do mapa

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',
  });
}