How to load a <div> on top of React google map component? - css

Question

I am trying to display a small card basically over the google maps component that this https://www.npmjs.com/package/#react-google-maps/api package provides. I set the zIndex to 2 but the <div> still shows below this map component.
The card element is not supposed to respond to any click it's just displayed on first load with the Map component
return (
<div>
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={8}
center={center}
></GoogleMap>
<Tracking style={{zIndex: 2}}/>
</div>
);
Tracking is the div that contains information.
Map container style is:
const mapContainerStyle = {
width: "100vw",
height: "100vh",
};

Answer 1

Actually, there are a lot of ways to do it.
Briefly:
You have to add position: 'relative' to the parent component.
You have to add position: 'absolute' and zIndex: 0 to the child component that you want to display as the background.
You have to add position: 'absolute' and zIndex: 1 (or more) to the child component that you want to display as the foreground.
If you use inline styling, you could do this:
Adding top: some_number, left: some_number, right: some_number, or bottom: some_number is optional (depends on what position you want)
Here is the working code sandbox https://codesandbox.io/s/compassionate-rhodes-qbm43
App.js
import "./styles.css";
import Map from "./Map.js";
import Tracking from "./Tracking";
export default function App() {
return (
<div
style={{
position: "absolute",
zIndex: 0,
width: "100%", // or you can use width: '100vw'
height: "100%" // or you can use height: '100vh'
}}
>
<Map />
<div
style={{
zIndex: 1,
position: "absolute",
top: 10,
left: 10,
backgroundColor: "white", // you can use any color value
width: "10%", // or you can use width: any_number
height: "90%" // or you can use height: any_number
}}
>
<Tracking />
</div>
</div>
);
}
Map.js
import React from "react";
import {
GoogleMap,
useLoadScript,
Marker,
InfoWindow
} from "#react-google-maps/api";
import Tracking from "./Tracking";
const libraries = ["places"];
const mapContainerStyle = {
position: "relative",
width: "100%",
height: "100%"
};
const center = {
lat: -33.86882,
lng: 151.20929
};
function Map() {
const { isLoaded, loadError } = useLoadScript({
googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
libraries
});
if (loadError) return "Error loading maps";
if (!isLoaded) return "Loading Maps";
return (
<div
style={{
position: "absolute",
zIndex: 0,
width: "100%", // or you can use width: '100vw'
height: "100%" // or you can use height: '100vh'
}}
>
<GoogleMap
mapContainerStyle={mapContainerStyle}
zoom={8}
center={center}
></GoogleMap>
</div>
);
}
export default Map;
Tracking.js
import React from "react";
const Tracking = () => {
return (
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
);
};
export default Tracking;