1

O mapa do google não está aparecendo no meu site.

Código:

<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>

Se eu não usar a div ROW, o mapa aparece normalmente, mas como quero dividir a tela em duas partes, quero fazer do jeito que está acima.

Alguma dica?

5
  • 1
    Verifica a altura da div, talvez seja necessário adionar um css height
    – N. Dias
    Commented 10/12/2017 às 20:27
  • 1
    row é o id ou a class row do bootstrap?
    – N. Dias
    Commented 10/12/2017 às 20:30
  • já está com o height, tanto que, quando eu uso fora da div, funciona de boa. row é a class, vou corrigir. Commented 10/12/2017 às 20:31
  • o height está com 100% Commented 10/12/2017 às 20:32
  • 1
    Tenta assim <div class="col-6"><div id="map"></div></div>
    – Syzoth
    Commented 10/12/2017 às 20:38

1 Resposta 1

2

O sistema de grid deve estar conflitando com a altura do mapa, troque isto:

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

Por isto:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .