Google Map Display Gray

Question

I am using Rest Api For getting user's details from twitter and want to display the location of the users inside the map..

Everything is going correct except the map

If I press F11 In Full Screen Mode the map is displaying correctly i felt the problem is somewhere inside the javascript..

I have also given the width and height of the map_canvas div in percent but this also does work.

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