visgl / react-google-maps

React components and hooks for the Google Maps JavaScript API
https://visgl.github.io/react-google-maps/
MIT License
1.26k stars 104 forks source link

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

Closed Tak1za closed 9 months ago

Tak1za commented 9 months ago

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

Logs

No response

LukasB97 commented 9 months ago

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

Next.js, tailwind, ShadUI

Tak1za commented 9 months ago

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 commented 9 months ago

@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 commented 9 months ago

@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 commented 4 months ago

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!