javascript - Google map JavaScript 收费但隐藏在 CodeIgniter 上

Question

我正在使用 JavaScript 的 Google map API，但 map 不收费

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 检查器中:

但是 map 没有出现在浏览器中

我做错了什么？

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>