jQuery UI Dialog With Map Inside

HTML

<head lang="en">
  <title></title>
  <title>jQuery UI Dialog - With map inside test</title>
  <script src="http://maps.googleapis.com/maps/api/js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
</head>
<body>
  <button id="show-map">Show map dialog</button>
  <div id="bigMap" style=" position:relative;width:100%;height:600px;"></div>
  <div id="map-dialog" title="jquery-ui map dialog">
    <div id="googleMap" style="width:400px;height:400px;"></div>
  </div>

<script>
  $(function() {

    function initializeDlgMap() {
      var mapProp = {
        center:new google.maps.LatLng(36.832776,10.236236),
        zoom:15,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    }

    function initializeBigMap() {
      var mapProp = {
        center:new google.maps.LatLng(36.832776,10.236236),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("bigMap"),mapProp);
    }

    google.maps.event.addDomListener(window, 'load', initializeBigMap);

    dialog = $( "#map-dialog" ).dialog({
      autoOpen: false,
      height: 400,
      width: 400,
      modal: true,
      buttons: {
        Cancel: function() {
          dialog.dialog( "close" );
        },
        Confirm: function() {
          dialog.dialog( "close" );
        }
      },
      open: function() {
        initializeDlgMap();
      }
    });
    $( "#show-map").click(function() {
      dialog.dialog( "open" );
    });
  });
</script>

</body>
</html>