CSS z-index on your page does not decide which Google Maps API marker appears on top of another. Set the marker’s Maps API zIndex option—or update it with setZIndex()—to control stacking. For new projects, use AdvancedMarkerElement; Google deprecated the legacy google.maps.Marker on February 21, 2024.
Why CSS z-index does not reorder map markers
Google Maps markers are separate objects managed by the Maps JavaScript API, so the page’s CSS stacking rules are not the control for ordering one marker against another. Set the API marker’s zIndex instead. Google’s MarkerOptions.zIndex reference says higher values appear in front of lower values.
For legacy markers, you can also change the value after creation with marker.setZIndex(value). This is useful when an interaction, such as selecting a result, should raise that marker above the others.
Set an explicit stacking order
Legacy google.maps.Marker
The legacy marker supports zIndex in its options and through setZIndex():
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
const marker = new google.maps.Marker({
map,
position,
zIndex: 1000
});
// Raise it after selection
marker.setZIndex(2000);Google documents that higher zIndex values display in front. It does not prescribe a universal numeric scale, so choose values that make sense for your application and use them consistently—for example, normal markers below hovered markers, and hovered markers below the selected marker.
AdvancedMarkerElement
For new implementations, load the marker library and pass zIndex when constructing an AdvancedMarkerElement:
Rank #2
- JavaScript Jquery
- Introduces core programming concepts in JavaScript and jQuery
- Uses clear descriptions, inspiring examples, and easy-to-follow diagrams
const {AdvancedMarkerElement, CollisionBehavior} =
await google.maps.importLibrary("marker");
const marker = new AdvancedMarkerElement({
map,
position,
zIndex: 1000,
collisionBehavior: CollisionBehavior.REQUIRED
});This example uses REQUIRED so the marker remains displayed. Advanced markers also support collision behavior, which determines what happens when markers overlap.
Understand the default order and collision behavior
Default ordering
When you do not supply an explicit zIndex, legacy markers are ordered by their vertical position on the screen: markers lower on the screen appear in front of markers farther up. That automatic order can be useful for a simple map, but it may not match an application’s selection or emphasis rules.
Rank #3
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Advanced marker collision options
Advanced markers add collision controls. The behavior you choose affects whether a marker stays visible or can be hidden when markers overlap:
REQUIRED: the marker always displays.OPTIONAL_AND_HIDES_LOWER_PRIORITY: the marker may be hidden; in a conflict, a higher-zIndexmarker has priority.REQUIRED_AND_HIDES_OPTIONAL: the marker stays visible and hides overlapping optional markers.
Use zIndex to express priority, and collision behavior to define whether overlap can remove a marker from view. They address related but different display decisions.
Choose an approach for selection and emphasis
| Approach | Ordering or visibility rule | Useful when |
|---|---|---|
Explicit zIndex |
Higher values appear in front of lower values. | You need predictable layers, such as selected above hovered above normal. |
| Default screen-position ordering | Without an explicit value, legacy markers lower on screen appear in front of those farther up. | The map’s natural vertical layout is sufficient. |
| Advanced marker collision behavior | The selected behavior determines whether overlapping markers remain visible or may be hidden; priority can depend on zIndex. |
Overlapping markers need deliberate visibility rules as well as priority. |
For a selected-marker interaction, assign a higher value to the selected marker and restore its normal value when selection changes. Keep that policy separate from click handling: raising a marker changes its visual stacking, while your application still needs to manage which marker is selected and what its click or selection state means.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Account for the legacy marker deprecation
Google states that google.maps.Marker has been deprecated since February 21, 2024, and recommends AdvancedMarkerElement for new implementations. The legacy Marker API still documents zIndex, but new code should consider advanced markers, especially when collision behavior is needed. Moving to the advanced marker API involves using its class and marker-library loading pattern; the exact changes depend on how the existing map creates and manages markers.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
