谷歌地图显示灰色

Question

我正在使用Rest Api从Twitter获取用户的详细信息，并希望在地图中显示用户的位置..

除地图外，一切都正常

如果我在全屏模式下按F11，地图显示正确我觉得问题出在javascript里面..

我还给出了map_canvas div的宽度和高度百分比，但这也有效。

<script src="js/filterTable.js"></script>
<script src="js/tab.js"></script>
<script>
      $(document).ready(function() {
      $('#menu').click(function(){
      $('.submenu').slideToggle(500);
      });
      $('#menu1').click(function(){
        $('.submenu1').slideToggle(500);

        });

         $( "#tabs" ).tabs();
     });
    </script>
    <section>
               <div id="tabs-2">
                    <div id="map_canvas"></div>
                    </div>       
        </section>
        <div id="mainbox">
            <div id="innermain">

            </div>        
        </div>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
    $(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
     zoom: 1,
        center: new google.maps.LatLng(0, 0),
        mapTypeId: 'terrain'
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = ['<?PHP echo implode("','",$location); ?>'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            if(data.results[0]){
                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                new google.maps.Marker({
                    position: latlng,
                    map: map

                });
            }
        });
    }

});
</script>