Problema, google maps en dialog box jquery ui

v1ctor · #1 (**permalink**) 14/02/2012, 12:01

Hola, estoy intentando meter un mapa dentro de un dialog box de jquery ui pero cuando se abre la ventana con el mapa, sale una parte pequeña del mapa y el resto gris, al moverlo se vuelve loco en fin, que no se ajusta al tamaño del dialog box. A ver si alguien sabe algo. Gracias.
Edit: me acabo de dar cuenta que este hilo tendría que ir al subforo de frameworkjs->jquery . Perdón.

Código:

<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
           	
       

  $(document).ready(function(){
   $('#dialog').dialog({
            autoOpen: true,
            width: 680,
            height: 480       
            
        });

   function initialize() {
	var myLatlng = new google.maps.LatLng(-34.397, 150.644);
	var myOptions = {
  		zoom: 8,
  		center: myLatlng,
  		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
   
  });
  </script>
</head>
<body onload="initialize()">
  
<div id="dialog">
<div id="map_canvas" style="width: 630px; height: 430px"></div>
</div>
</body>
</html>