Controlar o comportamento de conflito e a visibilidade do marcador

Nesta página, mostramos como controlar os seguintes aspectos dos marcadores avançados:

Definir o comportamento de conflito de um marcador
Definir a altitude do marcador
Controlar a visibilidade do marcador por nível de zoom do mapa

Definir o comportamento de conflito de um marcador

O comportamento de conflito controla como um marcador é mostrado em caso de conflito (sobreposição) com outro marcador. Isso só é compatível com mapas vetoriais.

Para escolher o comportamento de conflito, defina AdvancedMarkerView.collisionBehavior como uma das seguintes opções:

REQUIRED: (padrão) sempre mostrar o marcador, independentemente do conflito.
OPTIONAL_AND_HIDES_LOWER_PRIORITY: só mostrar o marcador se ele não se sobrepuser a outros elementos. Em caso de conflito, o marcador com o maior zIndex vai aparecer. Se eles tiverem o mesmo zIndex, aquele com a posição vertical mais abaixo na tela será mostrado.
REQUIRED_AND_HIDES_OPTIONAL: sempre mostrar o marcador, independentemente do conflito e ocultar todos os marcadores OPTIONAL_AND_HIDES_LOWER_PRIORITY ou rótulos que se sobrepuserem a eles.

Veja no exemplo a seguir como configurar o comportamento de conflito de um marcador:

TypeScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});index.ts

JavaScript

const advancedMarker = new google.maps.marker.AdvancedMarkerView({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.js

Definir a altitude do marcador

Em mapas vetoriais, você pode definir a altitude em que um marcador aparece. Isso é útil para ajustar a posição dos marcadores em relação ao conteúdo do mapa 3D. Para definir a altitude de um marcador, especifique um LatLngAltitude como valor para a opção MarkerView.position:

TypeScript

const pinView = new google.maps.marker.PinView({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    content: pinView.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});index.ts

JavaScript

const pinView = new google.maps.marker.PinView({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new google.maps.marker.AdvancedMarkerView({
  map,
  content: pinView.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});index.js

Controlar a visibilidade do marcador por nível de zoom do mapa

Veja a mudança na visibilidade dos marcadores, começando por diminuir o zoom:

Para controlar a visibilidade de um marcador avançado, crie um listener zoom_changed e adicione uma função condicional que defina AdvancedMarkerView.map como null se o zoom exceder o nível especificado, conforme mostrado no exemplo a seguir:

TypeScript

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        markerView01.map = zoom > 14 ? map : null;
        markerView02.map = zoom > 15 ? map : null;
        markerView03.map = zoom > 16 ? map : null;
        markerView04.map = zoom > 17 ? map : null;
    }
});index.ts

JavaScript

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    markerView01.map = zoom > 14 ? map : null;
    markerView02.map = zoom > 15 ? map : null;
    markerView03.map = zoom > 16 ? map : null;
    markerView04.map = zoom > 17 ? map : null;
  }
});index.js

Próximas etapas

Tornar os marcadores clicáveis e acessíveis