Control collision behavior, altitude, and visibility (original) (raw)
This page shows you how to control the following aspects of Advanced Markers:
- Set collision behavior for a marker
- Set marker altitude
- Control marker visibility by map zoom level
Set collision behavior for a marker
Collision behavior controls how a marker will display if it collides (overlaps) with another marker. Collision behavior is only supported on vector maps.
To set collision behavior, set AdvancedMarkerElement.collisionBehavior to one of the following:
REQUIRED: (default) Always display the marker regardless of collision.OPTIONAL_AND_HIDES_LOWER_PRIORITYDisplay the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higherzIndexis shown. If they have the samezIndex, the one with the lower vertical screen position is shown.REQUIRED_AND_HIDES_OPTIONALAlways display the marker regardless of collision, and hide anyOPTIONAL_AND_HIDES_LOWER_PRIORITYmarkers or labels that would overlap with the marker.
The following example shows setting collision behavior for a marker:
TypeScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
Set marker altitude
On vector maps, you can set the altitude at which a marker appears. This is useful for making markers appear correctly in relation to 3D map content. To set the altitude for a marker, specify a LatLngAltitude as the value for theMarkerView.position option:
TypeScript
const pin = new PinElement({ background: '#4b2e83', borderColor: '#b7a57a', glyphColor: '#b7a57a', scale: 2.0, });
const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral, });
JavaScript
const pin = new PinElement({ background: "#4b2e83", borderColor: "#b7a57a", glyphColor: "#b7a57a", scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 }, });
Control marker visibility by map zoom level
See the markers' visibility change (begin by zooming out):
To control the visibility of an Advanced Marker, create a zoom_changedlistener, and add a conditional function to set AdvancedMarkerElement.map tonull if the zoom exceeds the specified level, as shown in the following example:
TypeScript
map.addListener('zoom_changed', () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });
JavaScript
map.addListener("zoom_changed", () => { const zoom = map.getZoom();
if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });