PDA

View Full Version : How to set size of map?



songfei
14 Jun 2009, 11:29 PM
hi

I want to know how to set the size of Google map?

I?use border layout.

please look the code


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />

<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA_0srxbhnHx3Mq968__oglRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQdrrk8LyAQaBaqDMYSQyqdRIyAnQ" type="text/javascript"></script>
<script src="js/Ext.ux.GMapPanel.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),new Ext.TabPanel({
region:'south',
deferredRender:false,
activeTab:0,
height:100,
split:true,
items:[{
contentEl:'center3',
title: 'Tab1',
autoScroll:true
},{
contentEl:'center4',
title: 'Tab2',
autoScroll:true
}]
}),{
region:'west',
id:'west-panel',
title:'List',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
}
}
,
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
split:true,
items:[{
title: 'Map',
layout: 'fit',
items: {
xtype: 'gmappanel',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert('Its fine', 'and its art.');
}
}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
}
}]
})
]
});

});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<div id="west">

</div>
<div id="north">

</div>
<div id="center4">
4
</div>
<div id="center3">
3
</div>

<div id="props-panel">
</div>


</body>
</html>

Animal
15 Jun 2009, 2:22 AM
The GMapPanel will be sized by the (unnecessary) 'fit' layout wrapping Panel that you wrap ruond it.

songfei
15 Jun 2009, 6:28 AM
but code below don't work

I must drag the boder to resize the box

map can display OK

Animal
15 Jun 2009, 7:05 AM
What is the problem? Explain.

songfei
16 Jun 2009, 12:48 AM
sorry , English isn't my mother tongue

use the that code

map can't display integrity

after I change the size of map It's OK

Animal
16 Jun 2009, 1:22 AM
OK, two things.

Unwrap your GMapPanel so that it is a direct child of the TabPanel

Configure your TabPanel with layoutOnTabChange: true