Google Karte kann nicht geladen werden

Question

Google Karte wird nicht geladen. nur leere div anzeigt

hier mein Code-Schnipsel

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

Ich denke, meine Logik richtig ist. kann mir jemand helfen, es herauszufinden, was das Problem ist.

Thnx im Voraus. . . !

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> 

Sie benötigen ein anderes div für die Map-Container erstellen und die Breite & Höhe für diesen hinzufügen.

Answer 2

Zuerst benötigen Sie einen API-Schlüssel, den Sie nicht zu haben scheinen.

dann im Grunde nur folgen Sie den Google Maps API Tutorial, wie Sie scheinen, sorta getan haben.

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