Google地图只有刷新后才会显示

我无法在加载我的页面后使Google地图加载。每次我必须刷新才能显示，我不明白其中的原因。有人可以帮忙吗？Google地图只有刷新后才会显示

这里是我的HTML（有点简化）

<div id="lblContact" class="menu-content"> 
<div id="googleMap" style="height:400px;width:100%;"></div> 
</div>

这是脚本：

<script> 
    function initMap() { 
     var uluru = {lat: 55.682121, lng: 12.522697}; 
     var map = new google.maps.Map(document.getElementById('googleMap'), { 
       zoom: 4, 
       center: uluru 
      }); 
      var marker = new google.maps.Marker({ 
       position: uluru, 
       map: map 
      }); 
      } 
</script> 

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

我试图改变脚本的顺序，这没”帮助。

来源

2016-12-01 Robert Ross

你在哪里调用'initMap'？我看到它被定义，但我没有看到它被调用。也许增加'$（document）.ready（function（）{initMap（）;}）;'？ –

@MarcCompte，我在第二个脚本中有一个callback = initMap。 –

我现在看到。也许它是在HTML完全加载之前调用它的？如果你删除回调参数并添加jquery onload，它是否工作？ –

尝试用这种DOMContentLoaded功能包装你的代码，一旦DOM加载它将只运行，并应解决您的问题，这是香草JS相当于jQuery的$(document).ready(function(){})的，如果你熟悉：

document.addEventListener("DOMContentLoaded", function() { 

    function initMap() { 
     var uluru = {lat: 55.682121, lng: 12.522697}; 
     var map = new google.maps.Map(document.getElementById('googleMap'), { 
       zoom: 4, 
       center: uluru 
      }); 
      var marker = new google.maps.Marker({ 
       position: uluru, 
       map: map 
      }); 
      } 

});

来源

2016-12-01 11:27:55 Pixelomo

感谢您的答案，我试过了，但它没有奏效。 –

那怎么样和先调用的api脚本？ – Pixelomo

var uluru = {lat: 55.682121, lng: 12.522697}; 
 
     var map = new google.maps.Map(document.getElementById('googleMap'), { 
 
       zoom: 4, 
 
       center: uluru 
 
      }); 
 
      var marker = new google.maps.Marker({ 
 
       position: uluru, 
 
       map: map 
 
      });

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC_absRIQusU2qV5pLwxf3zyIlspwe9Wwc&callback=initMap"></script> 
 
<div id="lblContact" class="menu-content"> 
 
<div id="googleMap" style="height:400px;width:100%;"></div> 
 
</div>

来源

2016-12-01 11:28:12 Maharshi

感谢您的回答。可悲的是，由于某种原因，它没有奏效。 –

您应该打开并检查您的浏览器的开发人员选项中的错误。 – Maharshi

Google地图只有刷新后才会显示

回答

相关问题