Google Map is not working with bootstrap card layout in Chrome

by

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>

Check the comment in the second card

This is how it looks in chrome and edge!

enter image description here

105 thoughts on “Google Map is not working with bootstrap card layout in Chrome”

Leave a Comment