1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    16
    Vote Rating
    0
    springrider is on a distinguished road

      0  

    Default ExtJS.ux.GMapPanel and invalid argument error in IE

    ExtJS.ux.GMapPanel and invalid argument error in IE


    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

  2. #2
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Location
    Bamberg Germany
    Posts
    26
    Vote Rating
    0
    dotti is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    342
    Vote Rating
    12
    Stuart-SwarmOnline will become famous soon enough Stuart-SwarmOnline will become famous soon enough

      0  

    Default


    @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

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Location
    Bamberg Germany
    Posts
    26
    Vote Rating
    0
    dotti is on a distinguished road

      0  

    Default


    Sorry no Time until now.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    342
    Vote Rating
    12
    Stuart-SwarmOnline will become famous soon enough Stuart-SwarmOnline will become famous soon enough

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Location
    Bamberg Germany
    Posts
    26
    Vote Rating
    0
    dotti is on a distinguished road

      0  

    Default


    Can you show me your code that i can unterstand it better?

  8. #8
    Sencha User
    Join Date
    Apr 2011
    Location
    Bamberg Germany
    Posts
    26
    Vote Rating
    0
    dotti is on a distinguished road

      0  

    Default


    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'}
       }
      }]
     });
     });

  9. #9
    Sencha User
    Join Date
    Sep 2011
    Location
    Maddaloni (CE) Italy
    Posts
    74
    Vote Rating
    1
    ing.amdangelo is on a distinguished road

      0  

    Default i've a problem with the geocode address

    i've a problem with the geocode address


    {
    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
    Ing theMAdPumpkin