0 レビュー
2 回答
php-GoogleマップのJavaScriptチャージですが、CodeIgniterには表示されません
JavaScriptへのGoogleMapsAPIを使用していますが、マップは課金されません
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>
コンソールの場合：
カルガンドマパス
しかし、私のhtmlインスペクターでは：
![]()
ただし、マップはブラウザに表示されません
何が間違っているのですか？
わからない
0
レビュー
答え :
解決策：
コンテンツの前にすべての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>
わからない
0
レビュー
答え :
解決策：
ラッピングdivで高さを100％に設定するのではなく、マップdiv自体で100％に設定します。例：
<div style="height: 100%" id="map"></div>
これがjsbinの例です（APIキーを追加する必要があります）：
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。