PDA

View Full Version : ExtJS.ux.GMapPanel and invalid argument error in IE



springrider
23 Aug 2011, 6:26 PM
Good morning,

I am trying to develop an application using Google maps nested in tabs (Ext 3.3.0).
I tried the tab examples (https://github.com/VinylFox/ExtJS.ux.GMapPanel/tree/master/examples/tabs) and GMapPanel3.js for V3 Google maps but always got an invalid argument error in IE. Other browsers work fine.

Message: Invalid argument.
Line: 27
Char: 56
Code: 0
URI: http://maps.gstatic.com/intl/en_au/mapfiles/api-3/6/1/main.js

This is my JS code:

Ext.onReady(function(){

new Ext.TabPanel({
renderTo: 'tabs',
width:600,
height:400,
activeTab: 0,
deferredRender: false, // set this so we have access to the map on the second tab before its been activated
defaults: {
xtype: 'gmappanel',
zoomLevel: 2,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl']
},
items: [{
title: 'Fenway Park',
id: 'my_map1',
setCenter: {
lat: -14,
lng: 167
}
},{
xtype: 'panel',
title: 'Tab Without Map',
html: 'The other maps have been rendered but not displayed yet'
},{
title: 'Boston Museum of Fine Arts',
id: 'my_map2',
setCenter: {
geoCodeAddr: '465 Huntington Avenue, Boston, MA, 02215-5597, USA',
marker: {title: 'Boston Museum of Fine Arts'}
}
}]
});

});

Thanks in advance for your help.

Sylvain

VinylFox
6 Sep 2011, 4:11 PM
Go get the most recent version, it has been updated to work with Ext4

https://github.com/VinylFox/ExtJS.ux.GMapPanel

Note that only the window example is setup to use Ext4, not the tabs example.

dotti
10 Nov 2011, 1:16 PM
Hi,

i did try to make an tab example for ext4 and it work's half way.
Just the map fit not to the tab. It fit only like this

29220


Is ther any working example for tab's and Ext4?


mfg


Klaus

Stuart-SwarmOnline
23 Nov 2011, 5:38 AM
@Klaus, I'm seeing the same behaviour but with a 'raw' Google Map embed. Not sure what is causing it though. If you make any breakthroughs I'd appreciate you sharing!

Thanks
Stuart

dotti
25 Nov 2011, 6:14 AM
Sorry no Time until now.

Stuart-SwarmOnline
25 Nov 2011, 6:17 AM
I have found that if the map is rendered in a panel/container that is already visible then it works correctly. For example, I have a card layout with the map on card 2 and the map was initiated straight away but was rendering with half of it greyed out (and the marker that should have been in the centre in the top right).

When I performed the map initiation when the 2nd card was shown (via show event) then it renders correctly. I see that your screenshot has maps in tabs which could mean the same problem is occurring.

Stuart

dotti
25 Nov 2011, 8:25 PM
Can you show me your code that i can unterstand it better?

dotti
26 Nov 2011, 1:43 AM
I did get it working on my tab ext4 example:

To get it working i had to remove the following line:


// deferredRender: false, // set this so we have access to the map on the second tab before its been




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>GMap Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../../ext-all-debug.js"></script>
<!-- GMaps API Key that works for www.extjs.com (http://www.extjs.com) -->
<!--<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUCG2rlIeVFJ07rCgVUYjhhSVbRpeAZk72H9nRSWIwLg0s1ul-BRlbCt360qbQumadan9ZlGxlCWzqg" type="text/javascript"></script>-->
<!-- GMaps API Key that works for localhost -->
<!--<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAJDLv3q8BFBryRorw-851MRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTyuslsNlFqyphYqv1PCUD8WrZA2A" type="text/javascript"></script>-->
<!-- Includes for V3 of Google Maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="../../src/GMapPanel3.js"></script>
<script src="tabs-basic-ext4.js"></script>
<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<h1>GMap Tabs</h1>
<p>This example shows how to create maps in tab panels.</p>
<p>Note that the js is not minified so it is readable. See <a href="../../src/GMapPanel3.js">GMapPanel3.js</a> and <a href="tabs-basic-ext4.js">tabs-basic-ext4.js</a> for the full source code.</p>
<div id="tabs"></div>
</body>
</html>





Ext.onReady(function()
{
new Ext.TabPanel({
renderTo: 'tabs',
layout: 'fit',
border: false,
width:600,
height:400,
activeTab: 0,
// deferredRender: false, // set this so we have access to the map on the second tab before its been activated
items:
[
{
title: 'Test',
xtype: 'gmappanel',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
layout: 'fit',
border: false,
id: 'my_maptest',
setCenter:
{
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Bamberg'}
},
buttons:
[{
text: 'Hide Markers',
handler: function()
{
Ext.getCmp('my_maptest').hideMarkers();
}
},
{
text: 'Show Markers',
handler: function()
{
Ext.getCmp('my_maptest').showMarkers();
}
}]
},
{
title: 'Fenway Park',
xtype: 'gmappanel',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
layout: 'fit',
border: false,
id: 'my_map1',
setCenter:
{
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
}
}]
});
});

ing.amdangelo
18 Jun 2012, 2:37 AM
{
xtype: 'fieldset',
collapsible: true,
width: 970,
height: 470,
margin: '10 0 0 0',
title: 'Mappa',
items: [
{
xtype: 'gmappanel',
id: 'mymap',
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'}
}
}]
},

The Map appears grey and don't load