Controla el comportamiento de colisión y la visibilidad del marcador

En esta página, te indicamos cómo controlar los siguientes aspectos de Marcadores avanzados:

  • Cómo configurar el comportamiento de colisión de un marcador
  • Cómo configurar la altitud de un marcador
  • Cómo controlar la visibilidad de un marcador según el nivel de zoom del mapa

Cómo configurar el comportamiento de colisión de un marcador

El comportamiento de colisión controla cómo se mostrará un marcador si se superpone con otro. Esta conducta solo se admite en los mapas de vectores.

Para configurar el comportamiento de colisión, establece AdvancedMarkerView.collisionBehavior en una de las siguientes opciones:

  • REQUIRED: (valor predeterminado) Indica que el marcador debe mostrarse siempre, independientemente de la colisión.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY: Indica que solo debe mostrarse el marcador si no se superpone con otros. Si dos marcadores de este tipo se superponen, se mostrará el que tenga el valor de zIndex más alto. Si tienen el mismo valor de zIndex, se mostrará el que tenga la posición vertical más baja en la pantalla.
  • REQUIRED_AND_HIDES_OPTIONAL: Indica que el marcador debe mostrarse siempre, independientemente de la colisión, y que se deben ocultar los marcadores o etiquetas OPTIONAL_AND_HIDES_LOWER_PRIORITY que se superpongan con él.

En el siguiente ejemplo, se muestra la configuración del comportamiento de colisión de un 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

Cómo configurar la altitud de un marcador

En los mapas de vectores, puedes configurar la altitud en la que aparece un marcador. Esto es útil para que los marcadores aparezcan correctamente en relación con el contenido del mapa 3D. Para establecer la altitud de un marcador, especifica un valor de LatLngAltitude para la opción 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

Cómo controlar la visibilidad de un marcador según el nivel de zoom del mapa

Observa el cambio en la visibilidad de los marcadores (aleja el mapa):

Para controlar la visibilidad de un marcador de Advanced Markers, crea un objeto de escucha zoom_changed y agrega una función condicional para establecer AdvancedMarkerView.map en null si el zoom supera el nivel especificado, como se muestra en el siguiente ejemplo:

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óximos pasos

Configura los marcadores para que sean accesibles y admitan clics