Markers style z-index

[petritnuredini]

Hey there I am making an app with NextJS where I show markers on map, and by clicking any of markers it opens a tooltip showing more details about the business

My problem is with Markers z-index, I can not control it.

This is my code so far

const ExploreMap: React.FC = ({ googleMapApi }) => {
const {
defaultProps,
onGoogleApiLoaded,
onMapMove,
markers,
onMarkerClick,
activeTooltipId,
setActiveTooltipId,
} = useExploreMapHook();

return (

<GoogleMap
apiKey={googleMapApi}
defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }}
defaultZoom={5}
options={defaultProps}
mapMinHeight="100%"
onGoogleApiLoaded={onGoogleApiLoaded}
onChange={(map) => onMapMove(map)}
loadingContent={null}
>
{Companies.map((company: CompanyDetails, index: number) => (
<Marker
key={index}
lat={company.lat}
lng={company.lng}
company={company}
markerId={company.id}
onClick={onMarkerClick}
isActive={company.id === activeTooltipId}
setActiveTooltipId={setActiveTooltipId}
/>
))}

);
};

export default ExploreMap;

const Marker: React.FC = ({
markerId,
lat,
lng,
company,
onClick,
isActive,
setActiveTooltipId,
}) => {
const mapContainerRef = useRef(null);

const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
// Call the onClick prop with the necessary details
onClick(e, { markerId: markerId, lat, lng });
};

// Use the hook to handle outside clicks
useOutsideClick(mapContainerRef, () => {
setActiveTooltipId(null);
});

return (

{isActive && (

)}

);
};

export default Marker;

On Chrome dev tools I can see these elements (created by google-maps-react-markers library apparently.

If I make the z-index of children inside div with class google-map-markers-overlay manually it fixes the problem (Tooltip stays over the markers).

I tried to increase zIndex of tooltip but the tooltip is inside that div with index 0, didn't work.

div:has(> div.marker_container) {
z-index: -1 !important;
}

Any idea would be helpful, thank you in advance. 🙏🏻

[giorgiabosello]

Hi @petritnuredini I should update the documentation, by the way, zIndex prop is managed on the Marker itself and forwarded to the Overlay, so you can control it, like this:

<GoogleMap
	apiKey={googleMapApi}
	defaultCenter={{ lat: 45.4046987, lng: 12.2472504 }}
	defaultZoom={5}
	options={defaultProps}
	mapMinHeight="100%"
	onGoogleApiLoaded={onGoogleApiLoaded}
	onChange={(map) => onMapMove(map)}
	loadingContent={null}
>
	{Companies.map((company: CompanyDetails, index: number) => (
		<Marker
			key={index}
			lat={company.lat}
			lng={company.lng}
			company={company}
			markerId={company.id}
			onClick={onMarkerClick}
			isActive={company.id === activeTooltipId}
			setActiveTooltipId={setActiveTooltipId}
			zIndex={company.id === activeTooltipId ? 1 : 0} // here
		/>
	))}
</GoogleMap>

For reference, z-index is managed here and used in the overlay, here.

Let me know if it works :)

[petritnuredini]

Thank you for quick reply @giorgiabosello, your solution helped 🚀.

Btw this is a bit confused after I created the Marker component manually (didn't found any component from library), and the property zIndex couldn't be found.
I added zIndex as props (without using it on the component) and it worked correctly.

Big thank 🤝

[giorgiabosello]

@petritnuredini yes, that's correct. The library hasn't a Marker component, it just duplicates your one with React.Children and forwards some props of if to the Google Overlay. :)

[AbdelrahmanAhmed605]

hey @petritnuredini I'm facing the same issue. When you say you added zIndex as props without using it on the component, where exactly did you add the zIndex? I tried just adding it as a prop but that didn't get the result I wanted

[petritnuredini]

Hi there @AbdelrahmanAhmed605, let me explain this better with code.

I added zIndex as prop here:

  <Marker
            key={index}
            lat={company.lat}
            lng={company.lng}
            company={company}
            markerId={company.id}
            onClick={onMarkerClick}
            isActive={company.id === activeTooltipId}
            setActiveTooltipId={setActiveTooltipId}
            zIndex={company.id === activeTooltipId ? 1 : -1} // <--- Here
 />

Then, I added zIndex at Marker Props Type (so typescript won't show error).

interface MarkerComponentProps {
  lat: number;
  lng: number;
  company: CompanyDetails;
  markerId: number;
  onClick: (e: any, { markerId, lat, lng }: any) => void;
  isActive: boolean | null;
  setActiveTooltipId: (activeTooltipId: number | null) => void;
  zIndex: number;  // <--- Here
}

But below in Marker component didn't use zIndex anywhere because I don't need it.
Hope you understand better now.
Best regards.

[AbdelrahmanAhmed605]

Thank you for your help!!