PDA

View Full Version : Viewport with Google Maps does not work on IE



jesdial
11 Jan 2010, 11:37 AM
Hello all

I've a problem with a little app. that does work fine in Mozilla but raises "undefined is null or not an object line 54" in Internet Explorer 7...

Here is the html page:



<html>
<head>
<title>Ejerccio 2 Google Maps</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css"/>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
<!-- LIBS -->
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjcGJgRFbkaa1MpMsvH0Y2RQN9CB85ws2bWbBPj6VHKK6-pQFjxSrBSzKkFEJPfOy_51s668n9Vvjxw&sensor=false"
type="text/javascript"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
#map_canvas {
width: 100%;
height: 100%;
}

</style>
<script type="text/javascript">
var map;
zoom_st =[
['0','0'],
['1','1'],
['2','2'],
['3','3'],
['4','4'],
['5','5'],
['6','6'],
['7','7'],
['8','8'],
['9','9'],
['10','10'],
['11','11'],
['12','12'],
['13','13'],
['14','14'],
['15','15'],
['16','16'],
['17','17'],
['18','18'],
['19','19'],
['20','20'],
];

Ext.onReady(function() {

var item1 = new Ext.form.FormPanel({
title: 'Ir a coordenadas',
labelWidth: 60,
bodyStyle:'padding:5px',
cls:'empty',
items:[ new Ext.form.NumberField({
fieldLabel : 'Lat.',
id:'lat',
minValue: -360,
maxValue: 360,
decimalPrecision: 10,
decimalSeparator: '.'
}),
new Ext.form.NumberField({
fieldLabel : 'Long.',
id:'long',
minValue: -360,
maxValue: 360,
decimalPrecision: 10,
decimalSeparator: '.'
}),
new Ext.form.ComboBox({
store: zoom_st,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
id: 'zoom',
fieldLabel :'Zoom',
width: 100,
x:19
}),
new Ext.Button({
text: 'Go',
handler : go
})
]
});

var accordion = new Ext.Panel({
region:'west',
margins:'5 0 5 5',
split:true,
width: 210,
layout:'accordion',
items: [item1]
});

var map = new Ext.Panel({
region: 'center',
margins:'5 5 5 0',
contentEl : "map_canvas"
});

var viewport = new Ext.Viewport({
layout:'border',
items:[accordion,
map
]
});
});
</script>
</head>
<body onload="initialize()">
<script type="text/javascript" src="shared/examples.js"></script>
<div id="map_canvas"></div>
<script type="text/javascript">
var map;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(40,-3), 3);
map.enableScrollWheelZoom();
}
}
function go(){

alert ('Has pulsado el botón "Go".');

};
</script>
</body>
</html>



Thank you in advance

Jesús de Diego

VinylFox
11 Jan 2010, 11:57 AM
Start using JSLint (http://www.jslint.com/), its a great tool.

Your problem is an extra comma.

['20','20'], <--- here!

Any particular reason your not using the GMapPanel UX?