How to show seperate google maps v3 in different FloatingPanes using dojo
I'm trying to open up more than one dojox.layout.FloatingPane with different instances of a Google Map using the V3 API. I can always get the first FloatingPane to display correctly with the map, but after the first one I can't add more. I thought maybe I couldn't add more than one google map to the page, but I tried that and it worked. I discovered that no matter how I put the first map on the page (weather via a direct div on the page or on a FloatingPane), I couldn't get a Floating Pane to show another map.
At the bottom is a sample page that exhibits this behavior. The buttons on top are for a map with a Floating Pane -- if you click either one first you will see that map. After you open the FloatingPane with a map you can click on the initialize button and the other maps will load properly on the divs on the page, but not another FloatingPane with a map. If you click the initialize button first then you can't see any of the maps on the FloatingPane.
I would like to be able to show multiple FloatingPanes with different Map instances on the same page if possible.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
.gMapDiv {
width: 100%; height: 100%;
}
.gMapContainerDiv {
/*width: 480px; height: 300px;*/
width: 100%; height: 100%;
}
</style>
<style type="text/css">
@import url("http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/layout/resources/FloatingPane.css");
@import url("http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/layout/resources/ResizeHandle.css");
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="parseOnLoad: true, isDebug: true">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
for (var i=0 ; i<2 ; i++) {
var latlng = new google.maps.LatLng(19.4228开发者_Go百科34*(i+1), -99.091452);
var mapDiv = document.createElement('div');
mapDiv.className = "gMapDiv";
document.getElementById("mapContainer" + (i+1)).appendChild(mapDiv);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, myOptions);
}
}
dojo.require("dijit.form.Button");
dojo.require("dojox.layout.FloatingPane");
//dojo.addOnLoad(initialize);
//dojo.addOnLoad(function(){dojo.parser.parse();});
// adapted from code at: http:((lgrammel.blogspot.com/2009/05/google-map-in-dojo-floatingpane.html
function createMapPane(nhId,mapDiv,title, x, y, width, height) {
mapFloatingPane = new dojox.layout.FloatingPane({
title: title,
resizable: true,
dockable: false,
style: "position:absolute;top:"+y+";left:"+x+";width:"+width+"px;height:"+height+"px;visibility:hidden;",
content: mapDiv,
id: "mapFloatingPane" + nhId
});
// quick fix for positioning, does not seem necessary in source code
// example (FloatingPane test), but was necessary with dojo bin and
// Firefox 3.0.1 (for me issue still exists in 3.5.5)
mapFloatingPane.domNode.style.left = x + "px";
mapFloatingPane.domNode.style.top = y + "px";
mapFloatingPane.resize({ 'w': width, 'h': height });
//dojo.body().appendChild(mapFloatingPane.domNode);
dojo.byId("mapPanesDiv").appendChild(mapFloatingPane.domNode);
mapFloatingPane.startup();
return mapFloatingPane;
}
function showGMapOnFloatingPane(lat,lng,title,x,y,nhid) {
var myLatLng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mcDiv = document.createElement('div');
mcDiv.className = "gMapContainerDiv";
var mapDiv = document.createElement('div');
mapDiv.className = "gMapDiv";
mcDiv.appendChild(mapDiv);
var map = new google.maps.Map(mapDiv,myOptions);
var mapFloatingPane = createMapPane(nhid,mcDiv,title,100,50,484,326);
mapFloatingPane.show();
}
</script>
</head>
<body class="tundra ">
<div id="mapPanesDiv"></div>
<table width="100%">
<tr>
<td style="text-align:center;">
<button dojoType="dijit.form.Button" type="button" id="mapBtn1">
Rockefeller Center
<script type="dojo/method" event="onClick" args="evt">
showGMapOnFloatingPane(40.758229,-73.977749,"Rockefeller Center",20,100,1);
</script>
</button>
</td>
<td style="text-align:center;">
<button dojoType="dijit.form.Button" type="button" id="mapBtn2">
Las Vegas
<script type="dojo/method" event="onClick" args="evt">
showGMapOnFloatingPane(36.135657,-115.172424,"Las Vegas",250,100,2);
</script>
</button>
</td>
</tr>
<tr>
<td width="50%" style="text-align:left;"><div id="mapContainer1" style="width: 480px; height: 300px;border: 2px solid blue;"></div></td>
<td width="50%" style="text-align:right;"><div id="mapContainer2" style="width: 480px; height: 300px;border: 2px solid red;"></div></td>
</tr>
<tr>
<td>
<button dojoType="dijit.form.Button" type="button" id="initBtn">
Initialize the bordered maps in regular div (not in floating pane)
<script type="dojo/method" event="onClick" args="evt">
initialize();
</script>
</button>
</td>
</tr>
</table>
</body>
</html>
Thanks to seangarner on the #dojo IRC channel on irc.freenode.net I have an answer. I had to move the creation of the map object to after calling FloatingPane.show(). Here is the modified showGMapOnFloatingPane function:
function showGMapOnFloatingPane(lat,lng,title,x,y,nhid) {
var myLatLng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mcDiv = document.createElement('div');
mcDiv.className = "gMapContainerDiv";
var mapDiv = document.createElement('div');
mapDiv.className = "gMapDiv";
mcDiv.appendChild(mapDiv);
var mapFloatingPane = createMapPane(nhid,mcDiv,title,100,50,484,326);
mapFloatingPane.show();
var map = new google.maps.Map(mapDiv,myOptions);
}
加载中,请稍侯......
精彩评论