Google Map не показывает

Я пытаюсь показать простую карту от GM Апи, и по какой-то причине, когда HTML загружен «map_canvas» DIV установлен быть hidden.Here является код:Google Map не показывает

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

Я поставил слово «тест карты» для проверки видимости. Любые мысли ???

Благодаря

источник

2016-07-31 Christian Romero

Вы не можете хотеть, чтобы вставить действующий ключ здесь. – TangKe

Нет причин не размещать ключ браузера (типы, необходимые для API Google Maps JavaScript версии 3), он должен быть общедоступным (ключи сервера разные, они должны быть защищены) – geocodezip

Попробуйте добавить WITDH и высоту на карте контейнера

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

источник

2016-07-31 20:47:44 scaisEdge

Да, это работало с переупорядочением скрипт. благодаря –

Попробуйте поставить скрипт перед </body>, и после div#map_canvas.

В коде, когда вызывается сценарий, идентификатор «map_canvas» не существует.

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

Вам также необходимо использовать ключ API («YOUR_KEY») и вызвать функцию с обратным вызовом. Например, на моем сайте:

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

источник

2016-07-31 20:34:10

Google Map не показывает

ответ

Смежные вопросы