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.../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/m...-3/6/1/main.js

This is my JS code:

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

Unbenannt.jpg

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

mfg

Klaus

**Stoot98** · 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.

**Stoot98** · 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:

Code:

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

Code:

<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 -->
<!--<script src="http://maps.google.com/maps?file=api...dan9ZlGxlCWzqg" type="text/javascript"></script>-->
<!-- GMaps API Key that works for localhost -->
<!--<script src="http://maps.google.com/maps?file=api...qv1PCUD8WrZA2A" type="text/javascript"></script>-->
<!-- Includes for V3 of Google Maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?s...alse"></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>

Code:

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

ExtJS.ux.GMapPanel and invalid argument error in IE

Thread Tools

Search Thread

Display

ExtJS.ux.GMapPanel and invalid argument error in IE

ExtJS.ux.GMapPanel and invalid argument error in IE

i've a problem with the geocode address

i've a problem with the geocode address