[Bug] Multiple advanced markers with popups renders markers underneath the popup even with a higher z-index

[Tak1za]

Description

I actually tried using AdvancedMarker to render a custom popup box that displays some information. But whenever I do that while having multiple Markers on the map, the Popup div overlaps some of the Markers and doesn't overlap over the others.

I investigated a little further and noticed that the AdvancedMarker is adding z-index to the markers in an increasing fashion which I believe is causing my Popup div to overlap some and not the others.

I could definitely be wrong in my investigation; if so, any help would be appreciated on the same. I'll add a code sandbox here: https://codesandbox.io/p/sandbox/busy-ptolemy-wwp52m

I did dig in a little more and found that the markers are being added with a class called -marker-view, which have a transform style on them, because of which I believe the z-index gets to a different stacking context so a global css style doesn't work on it even with !important flag and only an inline css style will do the job, which I don't think is possible as of now.

Steps to Reproduce

https://codesandbox.io/p/sandbox/busy-ptolemy-wwp52m

Environment

• Library version: latest
• Google maps version: weekly
• Browser and Version: Chrome
• OS: Windows 11

Logs

No response

[LukasB97]

Im dealing with the same issue. Modifying z-index also does not work as expected.

Next.js, tailwind, ShadUI

[Tak1za]

Im dealing with the same issue. Modifying z-index also does not work as expected.

Next.js, tailwind, ShadUI

@LukasB97 I found a workaround, but I had to use a 3rd party library (reactjs-popup) to get my popup working. Here's a sandbox for that: Code Sandbox

[mrMetalWood]

@Tak1za Thank you for trying out this library and reporting the issues that you experienced. That really helps to see how the library is used and what kind of example implementations we we need to add to the documentation.

A common pattern to use when dealing with active/non-active markers or popups is to temporarily set the zIndex of the the active element to a very high number (e.g. 999999) while the other markers keep their original zIndex.

In your original example the AdvancedMarker component could look something like this:

<AdvancedMarker
      position={point}
      onClick={() => {
        map?.panTo(point);
        handleSetInfoWindowToShow(index);
      }}
      className="advanced-marker"
      zIndex={infoWindowToShow === index ? 99999 : index}
    >
     ...
    </AdvancedMarker>

Notice the zIndex property on the component. This way the currently active (clicked) marker gets a very hight temporary zIndex and will appear above all the other markers. Here is a fork of your CodeSandbox to demonstrate that behaviour: CodeSandbox

[Tak1za]

@Tak1za Thank you for trying out this library and reporting the issues that you experienced. That really helps to see how the library is used and what kind of example implementations we we need to add to the documentation.

A common pattern to use when dealing with active/non-active markers or popups is to temporarily set the zIndex of the the active element to a very high number (e.g. 999999) while the other markers keep their original zIndex.

In your original example the AdvancedMarker component could look something like this:

<AdvancedMarker
      position={point}
      onClick={() => {
        map?.panTo(point);
        handleSetInfoWindowToShow(index);
      }}
      className="advanced-marker"
      zIndex={infoWindowToShow === index ? 99999 : index}
    >
     ...
    </AdvancedMarker>

Notice the zIndex property on the component. This way the currently active (clicked) marker gets a very hight temporary zIndex and will appear above all the other markers. Here is a fork of your CodeSandbox to demonstrate that behaviour: CodeSandbox

Oh wow. That works pretty well. I didn't notice the Advanced Marker had a zIndex as a prop. Thanks a lot for your quick help.

[mxmzb]

I'm looking to do a similar thing, but I'd just like to bump up the z-index during a hover on the advanced marker (or on a click of it, which would open a popup), but then go back again to its original state. Unfortunately setting zIndex param will keep it up there if I set it back to undefined or null, so I kinda need to know the original zIndex or the library would have the default behavior of setting the zIndex back to the previously defined value if the prop is set as undefined. Not sure..

Edit: NVM, actually had a diff issue that didn't reset the zIndex back to undefined so I thought it's staying there. Works like expected!