Having trouble with including Google Maps within my webpage. I want it to be fixed in place as I have a long list on the left of the map. However, when I add position: fixed; to the map's CSS, it stops scrolling and just shows a white area underneath:
https://i.sstatic.net/Vo599.png
Below is the CSS for the left list and the map on the right:
.grid-container {
display: grid;
grid-template-columns: 480px 1fr;
grid-template-rows: 1fr;
grid-template-areas: "list map";
}
.list {
grid-area: list;
height: 100vh;
}
#map {
grid-area: map;
position: fixed;
}
body {
margin: 0;
}
HTML structure:
<body onload="initialize()">
<form id="form1" runat="server">
<div class="grid-container">
<div class="list">
<div class="navigation-bar"></div>
<div class="tiles"></div>
</div>
<div id="map"></div>
</div>
</form>
</body>
I've tried multiple solutions from Stack Overflow but nothing seems to work. Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!