Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 382
  • Last Modified:

Bring Google Marker on top of other markers on hover

I have many markers one on top of the other, i want each marker on hover to be brough on top.
How can i achieve that

(no need to explain how to capture the hover event)
1 Solution
Hi there.

This is a long shot, but it seems to work in Firefox. I don't know about IE.

What is making this difficult, is that Google is setting the zIndex property of the markers that is displayed, according to their lat/lng position on the map. The lower they are displayed, the higher their zIndex. This gives the markers their nice overlapping look.

The trick is to modify the zIndex. But how?

Playing with the markers, I found that the image is contained inside a DOM object called 'Rs'.

You should be able to access it using the reference:


For a test case, I set the zIndex to 0, since their current values is something like -800000.

This brought the underlying marker forward.
One thing to remember though, is that you will need to store the current value of the zIndex somewhere, so that you can reload it after the mouse moved away from the marker.

Hope it helps ^_^

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now