Google지도 Api로드 중이지만 표시되지 않음

Question

이 페이지의지도를 몇 달 동안 사용해 보았습니다. 이제지도가로드되지만 표시되지 않습니다. 나는 api가 코드를 추가하기 때문에 이것을 말할 수있다. 그러나 최종 결과는지도 div의 공백입니다. 어떤 도움은 긍정적입니다. 아래는 자바 스크립트 및 html 코드입니다.

/**********************************************************/ 
/* JS Google Map          */ 
/**********************************************************/ 
function initMap() { 
    var myLocation = new google.maps.LatLng(36.828800, -76.132800); 

     var draggableValue; 
     if($(document).width() <= 768){ 
      draggableValue = false; 
     } 
     else{ 
      draggableValue = true; 
     } 


    var mapOptions = { 
     center: myLocation, 
     zoom: 16, 
     mapTypeControl: true, 
     draggable: draggableValue, 
     scaleControl: false, 
     scrollwheel: false, 
     styles: [ 
    { 
     "featureType": "landscape", 
     "stylers": [ 
      { "visibility": "on" }, 
      { "color": "#555559" }, 
      {lightness: 51} 
     ] 
    },{ 
     "featureType": "poi", 
     "stylers": [ 
      { "visibility": "off" } 
     ] 
    },{ 
     "featureType": "road", 
     "stylers": [ 
      { "color": "#555559" } 
     ] 
    },{ 
     "elementType": "geometry.stroke", 
     "stylers": [ 
      { "visibility": "off" } 
     ] 
    },{ 
     "featureType": "road", 
     "elementType": "labels.text.fill", 
     "stylers": [ 
      { "visibility": "on" }, 
      { "weight": 8 }, 
      { "hue": "#ffffff" }, 
      { "color": "#ffffff" } 
     ] 
    },{ 
     "featureType": "landscape", 
     "elementType": "labels.text.stroke", 
     "stylers": [ 
      { "color": "#ffffff" }, 
      { "visibility": "on" } 
     ] 
    },{ 
     "featureType": "poi", 
     "elementType": "labels.icon", 
     "stylers": [ 
      { "visibility": "on" } 
     ] 
    },{ 
     "featureType": "water", 
     "elementType": "labels.text.fill", 
     "stylers": [ 
      { "visibility": "off" }, 
      { "color": "#ffffff" } 
     ] 
    },{ 
     "featureType": "water", 
     "elementType": "labels.text.stroke", 
     "stylers": [ 
      { "visibility": "on" }, 
      { "color": "#ffffff" } 
     ] 
    },{ 
     "featureType": "water", 
     "stylers": [ 
      { "color": "#555559" }, 
      {lightness: 25} 
     ] 
    },{ 
    },{"stylers": [{"saturation": 0}]} 
], 

     streetViewControl: true /**/ 

    }; 

    var image = new google.maps.MarkerImage('/assets/images/icon.png', 
      new google.maps.Size(500, 500), 
      new google.maps.Point(0, 0), 
      new google.maps.Point(30, 30), 
      new google.maps.Size(60, 60) 
     ); 
    var shape = { 
     coords: [1, 1, 1, 60, 60, 60, 60, 1], 
     type: 'poly' 
     }; 
    var infowindow = new google.maps.InfoWindow({ 
     pixelOffset: new google.maps.Size(0, 30), 
     content: '<h5 class="map-header text-center">Header</h5><p class="text-center">Info window text</p>' 
     }); 
    var marker = new google.maps.Marker({ 
     position: myLocation, 
     icon: image, 
     anchorPoint: new google.maps.Point(0, -60), 
     title: 'Header' 
     }); 

    var map = new google.maps.Map(document.getElementById("map"), 
     mapOptions); 

    marker.setMap(map); 
    marker.addListener('click', function() { 
     infowindow.open(map, marker); 
     }); 
} 
google.maps.event.addDomListener(window, 'load', initMap); 

/**********************************************************/ 
/* HTML Google Map          */ 
/**********************************************************/ 
<section style="height:100%;"> 
     <div class="map" id="map"> 
     </div> 
</section> 

여기는 jsfiddle입니다.

Answer 1

가 height와 min-height를 교체합니다.

여기에 작업 데모입니다 : http://jsbin.com/heposuwipu/edit?html,css,js,output

같은 문제가 오늘 나에게 일어났다. 오늘 변경된 GoogleMaps API와 같으며 최소 높이가 설정된 경우지도가 표시되지 않습니다. min-heigh은 귀하의 예에서 height으로 동작하므로 min-height을 height으로 대체하는 것이 안전합니다.

P. 지도가 나타나지 않도록 JSFiddle 데모에서 다른 문제가 발생했습니다. JSBin에 다른 데모를 만들었으므로 jQuery와 GoogleMaps javascript 파일이 올바르게로드되지 않았다고 생각합니다.

업데이트 : min-height이 이전 (https://twitter.com/GoogleMapsAPI/status/773650227123277824) 작동 할 수 있도록 Google지도 API가 바로 오늘날의 업데이 트를 롤백. 추적 할 문제에 대한 링크를 제공 해주신 @geocodezip에게 감사드립니다.

Answer 2

오늘 같은 문제가있었습니다.

Google Maps - Not displaying but loaded in HTML을 보았습니까?

시도 스타일의 높이를 100 % 맵 사업부 :

<section style="height:100%;"> 
     <div class="map" id="map" style="height:100%;"> 
     </div> 
    </section>