I'm using bootstrap card layout with google map. But whenever I move google map to a card in a right column it doesn't display properly. But if I moved it to first column it works! This issue only happens in chrome and edge. Works perfectly in firefox. Any ideas to solve this issue?
View following code in full screen
<!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 top, so it will be on 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>
question from:
https://stackoverflow.com/questions/65940371/google-map-is-not-working-with-bootstrap-card-layout-in-chrome 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
