Page Summary

outlined_flag

• This documentation explains how to manage Advanced Markers, including collision behavior, altitude, and visibility based on zoom level.

• You can control marker display during overlaps usingAdvancedMarkerElement.collisionBehavior with options likeREQUIRED,OPTIONAL_AND_HIDES_LOWER_PRIORITY, andREQUIRED_AND_HIDES_OPTIONAL.

• On vector maps, adjust marker altitude usingLatLngAltitude for theMarkerView.position to integrate with 3D map elements.

• Manage marker visibility based on zoom levels by implementing azoom_changed listener that conditionally setsAdvancedMarkerElement.map to control display.

• Advanced Markers are supported on Android, iOS, and JavaScript platforms with respective documentation available.

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, setAdvancedMarkerElement.collisionBehavior to one ofthe following:

• REQUIRED: (default) Always display the marker regardless of collision.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY Display the marker only if it does notoverlap with other markers. If two markers of this type would overlap, the onewith the higherzIndex is shown. If they have the samezIndex, the one withthe lower vertical screen position is shown.
• REQUIRED_AND_HIDES_OPTIONAL Always display the marker regardless ofcollision, and hide anyOPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labelsthat would overlap with the marker.

constadvancedMarker=newAdvancedMarkerElement({position:newgoogle.maps.LatLng({lat,lng}),collisionBehavior:collisionBehavior,});mapElement.appendChild(advancedMarker);
index.ts

constadvancedMarker=newAdvancedMarkerElement({position:newgoogle.maps.LatLng({lat,lng}),collisionBehavior:collisionBehavior,});mapElement.appendChild(advancedMarker);
index.js

Set marker altitude

On vector maps, you can set the altitude at which a marker appears. This isuseful for making markers appear correctly in relation to 3D map content. To setthe altitude for a marker, specify aLatLngAltitude as the value for theMarkerView.position option:

constpin=newPinElement({background:'#4b2e83',borderColor:'#b7a57a',glyphColor:'#b7a57a',scale:2.0,});constmarker=newAdvancedMarkerElement({// Set altitude to 20 meters above the ground.position:{lat:47.65170843460547,lng:-122.30754,altitude:20,}asgoogle.maps.LatLngAltitudeLiteral,});marker.append(pin);mapElement.append(marker);
index.ts

constpin=newPinElement({background:'#4b2e83',borderColor:'#b7a57a',glyphColor:'#b7a57a',scale:2.0,});constmarker=newAdvancedMarkerElement({// Set altitude to 20 meters above the ground.position:{lat:47.65170843460547,lng:-122.30754,altitude:20,},});marker.append(pin);mapElement.append(marker);
index.js

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 azoom_changedlistener, and add a conditional function to setAdvancedMarkerElement.map tonull if the zoom exceeds the specified level, as shown in the followingexample:

mapElement.innerMap.addListener('zoom_changed',()=>{letzoom=mapElement.innerMap.getZoom();for(leti=0;i <markers.length;i++){const{position,minZoom}=markerOptions[i];markers[i].position=zoom! >minZoom?position:null;}});
index.ts

mapElement.innerMap.addListener('zoom_changed',()=>{letzoom=mapElement.innerMap.getZoom();for(leti=0;i <markers.length;i++){const{position,minZoom}=markerOptions[i];markers[i].position=zoom >minZoom?position:null;}});
index.js

Next steps

Make markers clickable and accessible