23 May 2009

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>
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() {
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 });


return pane;

No comments: