I have encountered an issue with the bootstrap card layout and Google Maps integration. When I move the Google Map to a card in a right column, it does not display properly. However, placing it in the first column works perfectly fine. This problem seems to only occur in Chrome and Edge browsers, as it works flawlessly in Firefox. Any suggestions on how to resolve this issue?
For a better understanding, please view the following code snippet in full-screen mode.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="card-columns">
<div class="card">
<div class="card-body">
<p class="card-text">This is a longer card</p>
</div>
</div>
<div class="card"> <!-- If I move this card to the top, so it will be on the left side. Then it works!!!-->
<div class="card-body">
<div id="googleMap" style="width:100%;height:400px;"></div>
</div>
</div>
</div>
<script>
function myMap() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvPRM33ZqqUlIdR-g3kT8gLj_cWWD4HHk&callback=myMap"></script>
</body>
</html>
Pay attention to the comment in the second card.
This is how the layout appears in Chrome and Edge browsers:
https://i.sstatic.net/LK1r1.png
Edit:
I have identified that this issue is related to the CSS property "column-count", which affects the proper rendering of Google Maps.