Google Map zeigt nicht

Ich versuche, eine einfache Karte von GM Api zu zeigen, und aus irgendeinem Grund, wenn html geladen wird „map_canvas“ div eingestellt ist hidden.Here zu sein, ist der Code:Google Map zeigt nicht

<html> 
<head> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> 
<script type="text/javascript"> 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.45, -70.66667), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     jQuery(document).ready(function(){ 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     }); 

</script> 
</head> 
<body> 
body test 
<div id="map_canvas">map test</div> 
</body> 
</html>

Ich habe das Wort "Kartentest" gesetzt, um die Sichtbarkeit zu testen. Irgendwelche Gedanken ??

Dank

Quelle

2016-07-31 Christian Romero

Sie können nicht wollen, hier Ihren eigentlichen Schlüssel einzufügen. – TangKe

Es gibt keinen Grund, keinen Browserschlüssel zu veröffentlichen (die für die Google Maps JavaScript API v3 erforderlichen Typen), er muss öffentlich sein (Serverschlüssel sind unterschiedlich, sie sollten geschützt sein) – geocodezip

Versuche des Hinzufügen eine witdh und Höhe auf die Karte Container

<div id="map_canvas" style="width: 400px; height: 400px;"></div>

Quelle

2016-07-31 20:47:44 scaisEdge

Ja, das funktionierte mit der Neuanordnung der Skript. Vielen Dank –

Versuchen Sie das Skript vor dem </body>, und nach dem div#map_canvas zu setzen.

In Ihrem Code, wenn das Skript aufgerufen wird, ist die ID "map_canvas" nicht vorhanden.

<html> 
<head> 
<style type="text/css"> 
</style> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> 
</head> 
<body> 
body test 
<div id="map_canvas">map test</div> 
<script type="text/javascript"> 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.45, -70.66667), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     jQuery(document).ready(function(){ 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 
     }); 

</script> 
</body> 
</html>

Sie müssen auch Ihren API-Schlüssel ("YOUR_KEY") verwenden und eine Funktion mit einem Rückruf aufrufen. Zum Beispiel auf meiner Website:

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

<script type="text/javascript"> 
function initMap() { 
    var styleArray = [ 
     { 
      featureType: "all", 
      stylers: [ 
       { hue: "#3e4950" }, 
       { saturation: -80 } 
      ] 
     } 
    ]; 
    var map = new google.maps.Map(document.getElementById('mymaps'), { 
     center: {lat: 48.6949454, lng: 2.1856039}, 
     scrollwheel: false, 
     draggable: false, 
     zoomControl: false, 
     disableDoubleClickZoom: true, 
     disableDefaultUI: true, 
     // Apply the map style array to the map. 
     styles: styleArray, 
     zoom: 9 
    }); 
} 
</script> 
<!-- ... -->

Quelle

2016-07-31 20:34:10

Google Map zeigt nicht

Antwort

Verwandte Themen