[Dojo-interest] Is it possible to put a GoogleMap inside a Dialog?

Bell, Douglas DBell at boingo.com
Wed Aug 8 19:29:06 UTC 2007


Take a look at http://www.iplocationfinder.com, check the dialog in the
near by cities tab, it puts a GoogleMap in a Dialog popup.

- Doug

-----Original Message-----
From: dojo-interest-bounces at dojotoolkit.org
[mailto:dojo-interest-bounces at dojotoolkit.org] On Behalf Of Giuseppe
Cassata
Sent: Wednesday, August 08, 2007 11:02 AM
To: dojo-interest at dojotoolkit.org
Subject: [Dojo-interest] Is it possible to put a GoogleMap inside a
Dialog?

Hi that's what I did


1) I've created a mock Map Extension like this:

dojo.provide("avelco.widget.Map");
dojo.require("dojo.widget.GoogleMap");


//dojo.widget.tags.addParseTreeHandler("avelco:Map");
avelco.widget.Map = function(){
dojo.widget.GoogleMap.call(this);
}



dojo.inherits(avelco.widget.Map, dojo.widget.GoogleMap);
dojo.lang.extend(dojo.widget.GoogleMap, {

widgetType: "Map",
data:null,



initialize:function(/* object */args, /* object */frag){
		//	summary
		//	initializes the widget
		
		this.data=new Array();
		this.parse();
	},
		


parse:function(){
		//	summary
		//	Parses the passed table for data to plot on this
map.
		
    alert("parse");
		
		var o = new Object();
		o.lat = 37.4419;
		o.lng = -122.14193;
		
		this.data.push(o);
}
		

});


If I put that one inside a test HTML everything works...

But if I do this:


dojo.provide("avelco.widget.Mapdialog");
dojo.require('dojo.lang.*');
dojo.require('dojo.io.*');
dojo.require('dojo.widget.*');
dojo.require('dojo.html.*');


dojo.widget.defineWidget(
	"avelco.widget.Mapdialog",
	dojo.widget.HtmlWidget,
	{
	  // there are widgets inside
		widgetsInTemplate: true,
		data:'',
		map:null,

		// definitions
		templatePath:
dojo.uri.moduleUri("avelco","widget/templates/Mapdialog.html"),
	  templateCssPath: dojo.uri.moduleUri("avelco",
"widget/templates/Mapdialog.css"),
	  searchImage:
dojo.uri.moduleUri("avelco","widget/templates/images/googlemap.gif"),

		// postCreate is a predefined event 
		// handler that is executed when widget 
		// is created and initialized
		postCreate : function () {
			alert("mapdialog");
			
		},
		
		
		
		
		show:function(){		
		
		
		this.map = dojo.widget.createWidget("avelco:map", {
				widgetId:this.widgetId+"_map"
			});
		
		
		this.dialog.show();	
		
		
		// replace first child of dialog content
			// that is the content place.
			if (this.dialog.content.hasChildNodes())
	
this.dialog.content.removeChild(this.dialog.content.childNodes[0]);
	
this.dialog.content.appendChild(this.map.domNode);	
		}
		
	
		
		}
);

When I open the dialog I see the google controls to magnify the map and
to move in every direction but I cannot see the map

Here I attach the test page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"
lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="blog, administration, manage" />
<meta name="description" content="Blog CMS manager" />
<title>Creating new Dojo Widget - Example</title>
<link rel="stylesheet" type="text/css" href="screen.css" />
<!-- This section should be added on the page only once -->
<script type="text/javascript">
		var djConfig = {
			isDebug: true,
			debugAtAllCosts: true,
	
googleMapKey:"ABQIAAAAOQlMNe3AWkq27kRV3hWmghQyacgg3RW3kBqapZchmVLUYsjpkB
Qx9YjRzQ1EjBYEE7r0vXMZFfrAdA"
		};
</script>
<script type="text/javascript" src="../dojo/dojo.js"></script>
<script type="text/javascript">
	dojo.require('dojo.lang.*');
	dojo.require('dojo.io.*');
	dojo.require('dojo.widget.*');
	dojo.require('dojo.html.*');
	//dojo.require('dojo.widget.GoogleMap');
	//dojo.require('avelco.widget.Avdialog');
	dojo.require('avelco.widget.Map');
	dojo.require('dojo.widget.Dialog');
	dojo.hostenv.writeIncludes(); //makes debugging in Venkman or
FireBug possible
</script>
</head>

<body>
<div style="text-align: center;">
<div
	widgetId="articles" 
	dojoType="avelco:mapdialog"
	>
	</div>
</div>
<hr>
</body>
</html>

Can someone be so kind to explain me what's wrong???
Thank you in advance
Giuseppe

 

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://dojotoolkit.org/docs/book
Forums: http://dojotoolkit.org/forum
Dojo-interest at dojotoolkit.org
http://dojotoolkit.org/mailman/listinfo/dojo-interest


More information about the Dojo-interest mailing list