jquery tabs& maps

jquery tabs& maps

Am using google map inside jquery tabs. google map is not displaying inside tabs.Please help.

Below is my code.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBzHZOqQ2vYEd55e8NldIjmUaI8xntUzzQ&sensor=true">
    </script>
    <link type="text/css" rel="Stylesheet" href="css/jquery-ui-1.8.21.custom.css" />

        <script type="text/javascript" language="javascript" src="js/jquery-1.7.2.min.js"></script>
        <script src="js/url.js" type="text/javascript"></script>

        <script type="text/javascript" language="javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript">
   $(function() {
    $("#tabs").tabs();
       
});

      function initialize() {
          alert("map");
           google.maps.event.trigger(map, 'resize');

        var mapOptions = {
          center: new google.maps.LatLng(12.971599,77.594563),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
         
          


           
      }
    </script>
  </head>
  <body >
<!--     <div id="map_canvas" style="width:50%; height:100%"></div> -->
    <div id="tabs" align="left">
                    <p>
                        dsnfcjdskhfkshf
                    </p>
                    <ul>
                        <li>
                            <a href="#tabs-1" onclick="initialize();">Provider Details</a>
                        </li>
                        <li>
                            <a href="#tabs-2">View on Map</a>
                        </li>
                       
                    </ul>
                    <div id="tabs-1">
                       
                             <div id="map_canvas" ></div>
                       
                    </div>
                    <div id="tabs-2">
                        <p>
                            Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
                        </p>
                    </div>
                   
                </div>

  </body>
</html>