Google map in dojo FloatingPane

I created a small example that shows how to run Google Maps in a dojo FloatingPane. It can be found here. The code has been tested with Firefox 3.0 and Internet Explorer 8.0 .

The map uses the complete content canvas that is available in the FloatingPane:

<div id="map_container">
<div id="map" style="width:100%;height:100%;"></div>
</div>

In the JavaScript part, a FloatingPane is created for the map_container element, the map widget is created and the resize events from the FloatingPane are forwarded to the map widget using dojo.connect:

var floatingPane = createFloatingPane("map_container");
// ... (some checks etc)
var mapElement = dojo.byId("map");
var map = new GMap2(mapElement);
// ... (map configuration)
function resize() {
  map.checkResize();
}
dojo.connect(floatingPane,"resize", resize);

The example also has function that creates a dojox.layout.FloatingPane from a set of parameters. It contains a minor fix for some problems I had with the dragging of automatically created FloatingPane widgets in Firefox 3.0:

function createFloatingPane(
    divId, title, x, y, width, height) {

  var pane = new dojox.layout.FloatingPane({  
    'title': title,
    'id': divId + "_floater",
    'closeable': true,
    'resizable': true,
    'dockable': false
  }, divId);
 
  // quick fix for positioning, does not seem 
  // necessary in dojo source code test
  // (FloatingPane test), but was necessary with 
  // dojo binaries and Firefox 3.0.10
  pane.domNode.style.left = x + "px";
  pane.domNode.style.top = y + "px";
  pane.resize({ 'w': width, 'h': height });

  pane.startup(); 
 
  return pane;
}