<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Google/Map Panel Bug test</title>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all-debug.js"></script>
<script type="text/javascript" src="OpenLayers-2.9/lib/OpenLayers.js"></script>
<script type="text/javascript" src="GeoExt0.7/script/GeoExt.js"></script>
<script type="text/javascript" language="javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAR7YD2FMuJnK6_0QbbbF44hS3s4pSqQ84owDwZe7riLV-_wB94xRGhe29tjh7Jrc8S8JJWUWq19mq-A"></script>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" type="text/css" />
</head>
<body style="margin:5; padding:0; height:100%; width:100%; border:none;">
<script type="text/javascript"><!--
Ext.onReady(function(){
var map = new OpenLayers.Map();
map.addLayers([new OpenLayers.Layer.Google(
"Google Physical",
{type: G_PHYSICAL_MAP, visibility: true}
), new OpenLayers.Layer.Google(
"Google Streets",
{numZoomLevels: 20}
)]);
var myLayerStore = new GeoExt.data.LayerStore({
map: map
});
var mapViewer = new Ext.Panel({
renderTo: 'mapviewerid',
layout: 'border',
width: 800,
height: 600,
collapsible: false,
items:[{
xtype: 'treepanel',
id: 'westid',
title: 'West',
region: 'west',
width: 200,
collapsible: true,
collapsed: true,
root: new GeoExt.tree.LayerContainer({
text: 'All Layers',
layerStore: myLayerStore,
leaf: false,
expanded: true
})
}, {
xtype: 'gx_mappanel',
region: 'center',
layout: 'fit',
map: map,
layers: myLayerStore,
center: [-122, 38],
zoom: 5
}
]
});
// Kludge to make google and GeoExt.tree.LayerContainer play nice together
// start with the treepanel collapsed
// then these three steps in order make it work.
// The combination of switching layers and causing the mappanel to resize
// gets the google layer to fill the mappanel
// map.layers[1].setVisibility(true);
// Ext.getCmp('westid').expand(false);
// map.layers[0].setVisibility(true);
});
//-->
</script>
<div id='mapviewerid' style="width: 900px; height: 500px;"></div>
</body>
</html>