Comece agora

Siga estas etapas para adicionar a Biblioteca do Contexto local ao seu projeto, inicializar e configurar a visualização de mapa do Contexto local.

Ativar as APIs e os SDKs necessários

Para usar a Biblioteca do Contexto local, ative as APIs Maps JavaScript e Places. Siga as instruções para Ativar uma ou mais APIs ou SDKs. As duas APIs precisam estar ativadas no mesmo projeto no Console do Google Cloud.

Carregar a Biblioteca do Contexto local

Para carregar a Biblioteca do Contexto local, carregue a API Maps JavaScript normalmente e inclua os seguintes parâmetros:

• libraries=localContext carrega a Biblioteca do Contexto local.
• v=beta é necessário para usar esta versão.
• key contém sua chave de API.
• callback executa a função initMap().

O exemplo a seguir mostra uma tag de script com todas as opções mencionadas acima:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext&v=beta&callback=initMap">
</script>

Criar uma nova visualização de mapa do Contexto local

Para adicionar a Biblioteca do Contexto local a uma página da Web, primeiro crie uma instância de LocalContextMapView e defina as propriedades:

• element: o elemento div em que o mapa deve ser mostrado (nesse caso, é chamado de "mapa").
• placeTypePreferences: tipos de lugar que a Biblioteca do Contexto local precisa retornar (até 10).
• maxPlaceCount: o número máximo de lugares a serem mostrados (1 a 24).
• locationRestriction (opcional): restringe a pesquisa de lugar a um local específico. O padrão é a janela de visualização do mapa.

Quando você tiver uma instância de LocalContextMapView, defina as opções de mapa na instância interna do Map. O mapa 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:

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;
index.js

Adiar o carregamento de dados do Contexto local

É possível adiar o carregamento de dados do Contexto local no momento da inicialização. Para isso, defina a opção LocalContextMapView maxPlaceCount como 0. Isso é útil em situações em que você quer esperar até que os usuários estejam prontos para ver os dados. Quando estiver tudo pronto para carregar os dados do Contexto local, defina maxPlaceCount como um valor de 1 ou mais. O exemplo a seguir mostra a inicialização do mapa sem carregar os dados do Contexto local e, em seguida, a definição de maxPlaceCount para carregar os dados:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Mudar como a IU do Contexto local aparece

Para alternar os elementos da interface do usuário do Contexto local, defina a opção LocalContextMapView maxPlaceCount como 0. Para mostrar a interface do usuário do Contexto local novamente, defina maxPlaceCount como um valor de 1 ou mais.

Definir dimensões mínimas do mapa

A Biblioteca do Contexto local muda de forma responsiva a tela com base no tamanho renderizado do LocalContextMapView. As dimensões mínimas compatíveis de LocalContextMapView são:

• 300 x 480 pixels (retrato)
• 480 x 380 pixels (paisagem)

Quando o elemento que contém LocalContextMapView fica abaixo das dimensões mínimas, os elementos da Biblioteca do Contexto local (incluindo o seletor de lugar e os pontos de interesse) não aparecem. O nível de zoom do navegador afeta as dimensões mínimas. Por exemplo, se a janela do navegador for ampliada para 200%, as dimensões mínimas serão 600 x 960 (retrato) e 960 x 760 (paisagem).

Recomendações de CSS

As classes CSS no DOM da Biblioteca do Contexto local não fazem parte da API public, e o estilo, a modificação ou a seleção de elementos não são compatíveis. Recomendamos as seguintes diretrizes para evitar conflitos de estilo do DOM e garantir que a visualização de mapa da Biblioteca do Contexto local seja mostrada corretamente:

• Não use as classes CSS da Biblioteca do Contexto local, porque elas podem mudar sem aviso prévio.
• Não defina estilos, modifique ou selecione elementos no DOM da Biblioteca do Contexto local.

Se você usa um framework CSS que faz essas modificações, é possível resolver conflitos de estilo.

Por exemplo, se você quiser mudar a página geral box-sizing para border-box:

• Use substituições de box-sizing que definem o elemento <html> como border-box.
• Use box-sizing: initial para o elemento que contém a visualização de mapa da Biblioteca do Contexto local.
• Use box-sizing: inherit para todos os outros elementos.

Isso garante que o DOM da Biblioteca do Contexto local redefina box-sizing ao padrão com um seletor de baixa especificidade.

Veja como isso fica no código:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}