레일 5 : Google지도가 회색으로 표시됩니다.

Question

사용자가지도를 클릭하고 주소를 얻을 수있는 탭 안에 Google지도를 구현했습니다. 유일한 문제는 페이지를로드 할 때지도가 회색으로 표시되고 브라우저 창의 크기를 조정 한 후에지도가 올바르게 표시된다는 것입니다. 왜 이런 일이 일어나고 있는거야?

#map_canvas 
    height: 300px 
    width: 100% 
    margin: 0px 
    padding: 0px 


<div id="map_canvas"></div> 
<script> 
var map; 
var geocoder; 
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP }; 

function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(38.89103282648849, -97.646484375), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    geocoder = new google.maps.Geocoder(); 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
    google.maps.event.addListener(map, 'click', function(event) { 
     placeMarker(event.latLng); 
    }); 

    var marker; 
    function placeMarker(location) { 
     if(marker){ //on vérifie si le marqueur existe 
      marker.setPosition(location); //on change sa position 
     }else{ 
      marker = new google.maps.Marker({ //on créé le marqueur 
       position: location, 
       map: map 
      }); 
     } 
     document.getElementById('lat').value=location.lat(); 
     document.getElementById('lng').value=location.lng(); 
     getAddress(location); 
    } 

    function getAddress(latLng) { 
     geocoder.geocode({'latLng': latLng}, 
      function(results, status) { 
       if(status = google.maps.GeocoderStatus.OK) { 
        if(results[0]) { 
         document.getElementById("address").value = results[0].formatted_address; 
        } 
        else { 
         document.getElementById("address").value = "No results"; 
        } 
       } 
       else { 
        document.getElementById("address").value = status; 
       } 
      }); 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

업데이트 1

지도는 탭 안에이 내가 resize에 맞게하기 위해 노력하고있어 어디 :

이

는 내가 가지고있는 설정입니다 :

<script> 
$('#tabs').on('click','.tablink,#prodTabs a',function (e) { 
    e.preventDefault(); 
    var url = $(this).attr("data-url"); 

    if (typeof url !== "undefined") { 
     var pane = $(this), href = this.hash; 

     // ajax load from data-url 
     $(href).load(url,function(result){ 
      pane.tab('show'); 
      google.maps.event.trigger(map, 'resize'); 
     }); 
    } else { 
     $(this).tab('show'); 
    } 
}); 
</script> 

Answer 1

지도 초기화가 끝날 때 크기 조정을 트리거하면 제대로 작동합니다.

google.maps.event.trigger(map, 'resize');