-1

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

Edit

I find out that this is a problem related to css column-count. With this google maps are not properly rendering.

Sameera K
  • 1,298
  • 1
  • 17
  • 26

1 Answers1

1

Try using card-deck or card-group Then it works. https://getbootstrap.com/docs/4.0/components/card/

Or have a look at the column-count workaround for card-columns Bootstrap 4 - Responsive cards in card-columns

<!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">
    
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvPRM33ZqqUlIdR-g3kT8gLj_cWWD4HHk&callback=myMap" defer></script>
      <script defer>
        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>
    </head>
    
    <body>
      <div class="container mt-5">
        <div class="card-deck">
          <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">
              <p class="card-text">This is a longer card</p>
              <div id="googleMap" style="width:100%;height:400px;"></div>
            </div>
          </div>
      </div>
    </body>
    
    </html>
Thomas Verhoeven
  • 238
  • 3
  • 16