Estilizar o LocalContextMapView

Esta seção mostra como personalizar a aparência dos mapas LocalContextMapView aplicando estilos de mapa customizados e personalizando a aparência dos ícones de marcadores.

Aplicar estilos de mapa personalizados

Você pode modificar a aparência dos mapas LocalContextMapView aplicando estilos personalizados. LocalContextMapView vem com estilos padrão diferentes de um Map padrão.

Para substituir completamente os estilos padrão LocalContextMapView por estilos personalizados (styles contém a matriz de estilos personalizados):

// Set the styles in map options.
localContextMapView.map.setOptions({
  styles,
});

Para criar com estilos personalizados (styles) usando como base os estilos padrão do LocalContextMapView:

TypeScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.ts

JavaScript

// Merge map styles.
const mergedStyles = map.get("styles").concat(styles);

map.setOptions({
  center: center,
  zoom: 14,
  styles: mergedStyles,
});
index.js

Personalizar ícones de marcadores

Você pode definir a aparência dos ícones de marcadores personalizando a cor do alfinete, do glifo e a escala (tamanho). Faça isso ao inicializar o LocalContextMapView. Você pode definir esses valores como um objeto estático (os estilos de ícone não mudam com o estado) ou uma função dinâmica (os estilos de ícone mudam quando um ícone é destacado ou selecionado).

  • Os estilos personalizados são mesclados com os estilos padrão.
  • Todas as sintaxes de cor CSS são compatíveis, incluindo RGB, hexadecimal, HSL e palavra-chave de cor.
  • Escala é um valor numérico, em que uma escala de valor 2 é duas vezes maior do que uma de valor 1 e assim por diante. Por padrão, um alfinete tem diversos valores de escala definidos para diferentes estados. A escala é absoluta. Portanto, o valor transmitido não muda o tamanho do alfinete em relação ao valor padrão, mas substitui o padrão. Por exemplo, definir a escala como 1 para todos os estados vai atribuir o mesmo tamanho aos alfinetes, independentemente do estado.

Definir estaticamente a cor e a escala do ícone do marcador

Você pode definir a cor e a escala padrão dos ícones e glifos do marcador. Para fazer isso, especifique valores de cor para glyphColor e background e um valor numérico para scale no pinOptionsSetup. O exemplo a seguir define os ícones como preto, os glifos como brancos e aumenta a escala para 2:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
    pinOptionsSetup: {glyphColor: '#FFF', background: '#000', scale: 2},
 });

Definir dinamicamente a cor e a escala do ícone do marcador

Para definir as cores padrão de ícones e glifos com base no estado (padrão, destacado ou selecionado), use uma instrução condicional para definir os valores desejados para cada estado. Quando o usuário passa o mouse sobre um marcador, isHighlighted se torna true. Quando o usuário clica em um marcador, isSelected se torna verdadeiro. Quando a visualização de detalhes do lugar fecha, os ícones de marcadores são revertidos para o estilo padrão. O exemplo a seguir mostra como mudar o estilo do ícone de marcador com base no estado:

pinOptionsSetup: ({isSelected, isHighlighted}) => {
  if (isHighlighted) {
    return {glyphColor: 'white', background: '#990000', scale: 1.5};
  }
  if (isSelected) {
    return {glyphColor: 'rgb(0, 128, 0)', background: 'pink', scale: 2};
  }
},

Usar a Estilização de mapas baseada na nuvem com o Contexto local Beta

Para usar a Estilização de mapas baseada na nuvem com o Contexto local Beta, siga estas etapas:

  1. Crie um Map com um mapId e faça a transmissão dele para LocalContextMapView
  2. Desative etiquetas e ícones de pontos de interesse genéricos (PDIs).
  3. Desative alguns elementos nas opções de Map internas. Essas etapas são opcionais.

Crie um Map com um mapId e faça a transmissão dele para LocalContextMapView

Para adicionar um mapa usando um ID de Estilização de mapas baseada na nuvem, defina o elemento map (incluindo o ID e todas as opções internas de Map) e use esse ID para inicializar o LocalContextMapView, como mostrado no exemplo a seguir:

    function initMap() {
      const mapWithId = new google.maps.Map(document.createElement('div'),
        {center: {lat: 37.7749, lng: -122},
        zoom: 10,
        mapId: 'YOUR_MAP_ID_HERE'});
      const localContextMapView = new google.maps.localContext.LocalContextMapView({
        element: document.querySelector("#map"),
        placeTypePreferences: ["restaurant", "bar"],
        map: mapWithId,
        maxPlaceCount: 12,
      });
    };

Desativar etiquetas e ícones para PDIs genéricos

Para desativar os marcadores e ícones de PDIs genéricos, siga estas etapas:

  1. Acesse o console do Google Cloud e selecione Estilos de mapa para abrir a tela de estilos de mapas.
  2. Na sua configuração de estilo de Pontos de interesse, defina Visibilidade como Desativada para Etiquetas e Ícones.
  3. Na configuração do estilo de Pontos de interesse, defina Visibilidade como Ativada para Etiquetas de parque.

Definir opções internas de Map (opcional)

Também convém definir as seguintes opções internas de Map, além de outras opções internas de Map que você tiver definido, como mostrado aqui:

localContextMapView.map.setOptions({
  // ...
  clickableIcons: false,
});