Google Map not shown

Asked

Viewed 715 times

1

The google map is not appearing on my site.

Code:

<div class="row"> //O ERRO OCORRE QUANDO INCLUO A DIV MAP DENTRO DESSA DIV ROW
    <div id="map" class="col-6"></div>
    <div class="col-6">teste</div>
</div>

    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -8.607014, lng: -35.951444},
          zoom: 15
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=XXXXX&callback=initMap" async defer></script>

If I don’t use the div ROW, the map appears normally, but since I want to divide the screen into two parts, I want to do it the way it is above.

Any hint?

javascript html google-maps bootstrap
  • 1

    Check div height, you might need to add css height

  • 1

    Row is the bootstrap id or Row class?

  • is already height so much that when I use outside the div, it works well. Row is the class, I will fix.

  • the height is with 100%

  • 1

    Try it this way <div class="col-6"><div id="map"></div></div>

1 answer

2


The grid system must be conflicting with the height of the map, change this:

<div class="row">
    <div id="map" class="col-6"></div>
    <div class="col-6">teste</div>
</div>

For this reason:

<div class="row">
    <div class="col-6">
         <div id="map"></div>
    </div>
    <div class="col-6">teste</div>
</div>

Browser other questions tagged javascript html google-maps bootstrap

You are not signed in. Login or sign up in order to post.