Google Maps JavaScript Charge но скрыты от CodeIgniter

Question

им работать с Google Maps API, на JavaScript, но карта не взимает

div id="exTab2" class="container"> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
</script> 
    <script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js"></script> 

    <div class="container" onload="initMap();"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="page-header"> 
      <h1>Bievenido 
      </h1> 
      <div style="height:100%; width:100%;"> 
      <div id="map"></div> 
     </div> 
       <script type="text/javascript"> 

      var map; 
      function initMap() { 
      console.log('cargando mapas'); 
      map = new google.maps.Map(document.getElementById('map'), { 
       center: {lat: -34.397, lng: 150.644}, 
       zoom: 8 
      }); 
      } 

       </script> 
       <script async defer 
       src="https://maps.googleapis.com/maps/api/js?key=mykeyxxxxxxx&callback=initMap"> 
       </script> 

</div> 
</div> 
</div> 
</div> 

В консоли:

Cargando MAPAS

Но мой инспектор html:

B ut карта не отображается в браузере

Что я делаю неправильно?

Answer 1

Загрузите весь свой javascript перед своим контентом.

Вы не можете назвать OnLoad, когда функция создана после того, как страница оказывает ...

Я предполагаю, что он должен загрузить примерно в таком порядке ...

<div id="exTab2" class="container"> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
</script> 
<script async defer 
       src="https://maps.googleapis.com/maps/api/js?key=mykeyxxxxxxx&callback=initMap"> 
       </script> 
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js"></script> 
<script type="text/javascript"> 

var map; 
function initMap() { 
console.log('cargando mapas'); 
map = new google.maps.Map(document.getElementById('map'), { 
center: {lat: -34.397, lng: 150.644}, 
    zoom: 8 
    }); 
} 

</script> 

    <div class="container" onload="initMap();"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="page-header"> 
      <h1>Bievenido 
      </h1> 
      <div style="height:100%; width:100%;"> 
      <div id="map"></div> 
     </div>  
    </div> 
    </div> 
    </div> 
    </div> 

Answer 2

Вместо того, чтобы устанавливать высоту до 100 % на обертке div, установите его на 100% на самом div карты, например

<div style="height: 100%" id="map"></div> 

Вот jsbin пример (вам нужно добавить ключ API):

http://jsbin.com/hivovukiqu/edit?html,output