無法加載Google地圖

Question

Google地圖未加載。 只有空白格顯示的是

這裏我的代碼片段

<div id="map-container" class="col-md-9 col-sm-12"> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script>         
     function init_map() { 
      var var_location = new google.maps.LatLng(35.710107,73.039610);        
      var var_mapoptions = { center: var_location, zoom:17 };        
      var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});        
      var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);         
      var_marker.setMap(var_map); 
     }        
     google.maps.event.addDomListener(window, 'load', init_map);        
    </script> 
</div> 

我想我的邏輯是正確的。任何人都可以幫助我弄清楚問題所在。

Thnx提前。 。 。 ！

Answer 1

<div class="col-md-9 col-sm-12"> 
    <div id="map-container" style="width: 100%; height:400px;"></div> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script>         
     function init_map() { 
      var var_location = new google.maps.LatLng(35.710107,73.039610);        
      var var_mapoptions = { center: var_location, zoom:17 };        
      var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:"Test"});        
      var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions);         
      var_marker.setMap(var_map); 
     }        
     google.maps.event.addDomListener(window, 'load', init_map);        
    </script> 
</div> 

您需要創建另一個DIV的地圖容器，並添加寬度&高度此。

Answer 2

首先，你需要一個API密鑰，你似乎沒有。

然後基本上只是按照谷歌地圖API教程，就像你似乎已經一直在做。

<style> 
    #map { 
    height: 400px; 
    width: 400px; 
    } 
</style> 
<div id="map"></div> 
<script> 
     var map; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }); 
     } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> 

（https://developers.google.com/maps/documentation/javascript/examples/map-simple）