Select platform: [Android](https://developers.google.com/maps/documentation/android-sdk/advanced-markers/collision-behavior.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/ios-sdk/advanced-markers/collision-behavior.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/advanced-markers/collision-behavior.md.txt "View this page for the JavaScript platform docs.")

<br />

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


<iframe src="https://maps-docs-team.web.app/samples/advanced-markers-collision/dist/" allow="fullscreen; fullscreen"></iframe>

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_PRIORITY` Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher `zIndex` is shown. If they have the same `zIndex`, the one with the lower vertical screen position is shown.
- `REQUIRED_AND_HIDES_OPTIONAL` Always display the marker regardless of collision, and hide any `OPTIONAL_AND_HIDES_LOWER_PRIORITY` markers or labels that would overlap with the marker.

> [!NOTE]
> **Note:** On raster maps, only marker-to-marker collisions are detected. Marker collisions with basemap labels are supported only on vector maps.

The following example shows setting collision behavior for a marker:


### TypeScript

```typescript
const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);
```

### JavaScript

```javascript
const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);
```

<br />

## Set marker altitude


<iframe src="https://maps-docs-team.web.app/samples/advanced-markers-altitude/dist/" allow="fullscreen; fullscreen"></iframe>

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 the
`MarkerView.position` option:


### TypeScript

```typescript
const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);
```

### JavaScript

```javascript
const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);
```

<br />

## Control marker visibility by map zoom level

See the markers' visibility change (begin by zooming out):


<iframe src="https://maps-docs-team.web.app/samples/advanced-markers-zoom/dist/" allow="fullscreen; fullscreen"></iframe>

To control the visibility of an Advanced Marker, create a `zoom_changed`
listener, and add a conditional function to set `AdvancedMarkerElement.map` to
`null` if the zoom exceeds the specified level, as shown in the following
example:


### TypeScript

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

### JavaScript

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

<br />

## Next steps

[Make markers clickable and accessible](https://developers.google.com/maps/documentation/javascript/advanced-markers/accessible-markers.md.txt)