Невозможно загрузить карту Google

Question

Google Map не загружается. только пустой 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, который, как вам кажется, не имеет.

тогда, в основном, просто следуйте инструкциям api-google maps, как будто вы, похоже, делаете.

<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)