Google Maps APIが読み込まれているが表示されていない

Question

このページの地図は何ヶ月も働いていた。マップはロードされますが表示されません。 apiがコードを追加しているので、これを伝えることができます。しかし、最終的な結果はマップdivの空白です。いくつかの助けが賛同されるだろう。以下は、Javaスクリプトと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.S. JSFiddleのデモでマップが表示されないという問題がありました。 jQueryとGoogleMapsのjavascriptファイルが正しく読み込まれなかったので、JSBinに別のデモを作成したと思います。

更新： GoogleマップAPIは今日のアップデートをロールバックしましたので、min-heightは以前と同じように動作します（https://twitter.com/GoogleMapsAPI/status/773650227123277824）。追跡する問題へのリンクを提供してくれてありがとう@geocodezip

Answer 2

私は今日同じ問題を抱えていました。

Google Maps - Not displaying but loaded in HTMLを見ましたか？

てみスタイルの高さを100％とマップのDIV：

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