GoogleマップはF12を押した後にのみ表示されます

Question

Googleマップjavascript api docsで与えられたコーディング構造に正確に従いました。

私のコードは次のとおりです。

<div id="googleMap" style="height:400px;width:100%;"></div> 
 
\t \t <script> 
 

 
\t \t \t function initMap() { 
 
\t \t \t \t var uluru = {lat: <?php echo $row->lat;?>, lng: <?php echo $row->lng;?>}; 
 
\t \t \t \t var map = new google.maps.Map(document.getElementById('googleMap'), { 
 
\t \t \t \t zoom: 10, 
 
\t \t \t \t center: uluru 
 
\t \t \t \t }); 
 
\t \t \t \t var marker = new google.maps.Marker({ 
 
\t \t \t \t position: uluru, 
 
\t \t \t \t map: map, 
 
\t \t \t \t title: '<?php echo $row->location;?>' 
 
\t \t \t \t }); 
 
\t \t \t \t } 
 

 

 

 
\t \t \t \t </script> 
 
\t \t \t \t <script async defer 
 
\t \t \t \t src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLd0QoINJ8KgKpdNTqM-FIHY3svBFbTbQ&callback=initMap"> 
 
\t \t \t \t </script>

あなたがに行くことができます：https://www.eventspub.com/eventview.php?eid=120 と空白のマップページを見るために場所]タブをクリックします。 F12（Chromeの場合）を押した後でのみ動作します。ご意見をお聞かせください。

Answer 1

問題は、要素を非表示にし、initMap（）関数を実行しないテンプレートタブモジュールにあります。タブ位置のボタンで今

<div id="googleMap" style="height:400px;width:100%;display: none; "></div> 
 
<script> 
 

 
\t \t function initMap() { 
 
\t \t var uluru = {lat: <?php echo $row->lat;?>, lng: <?php echo $row->lng;?>}; 
 
\t \t var map = new google.maps.Map(document.getElementById('googleMap'), { 
 
\t \t  zoom: 10, 
 
\t  center: uluru 
 
\t \t }); 
 
\t \t var marker = new google.maps.Marker({ 
 
\t \t  position: uluru, 
 
\t \t  map: map, 
 
\t \t  title: '<?php echo $row->location;?>' 
 
\t \t }); 
 
\t \t } 
 

 

 

 
</script> 
 

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

JavaScript関数をonclickのイベントが発生した：

Iは、タブの外側に地図表示コードをコピー

<li ><a href="#h2tab3" role="tab" data-toggle="tab" onclick="showCustomMap()"><i class="fa fa-envelope pr-5"></i>Location Map</a></li>

は今JSスクリプトがdivのマップ要素を表示してもinitMap（）関数を呼び出すように構成されています。他のタブがにクリックされたときに

function showCustomMap() { 
 

 
\t \t document.getElementById('googleMap').style.display = "block"; 
 
\t \t initMap(); 
 

 
\t } 
 
\t function hideCustomMap() { 
 

 
\t \t document.getElementById('googleMap').style.display = "none"; 
 

 
\t }

また、hideMap（）関数を呼び出しています独立したマップdivを非表示にします。

地図は完璧に動作しています。 Jaromanda Xに感謝します。