Googleマップを読み込めません

Question

Googleマップが読み込まれていません。 唯一の空白divが

<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キーが必要です。

基本的にちょうどgoogle maps 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）