Google Map Rendering In Extjs 6.2 Modern tool kit

[calvinjbuster]

Hello.

First thanks for a great product. I'm have been a long time user of some of your older versions and just started with 6.2 modern tool kit. I was trying to incorporate google maps into a tab panel with little success. I can see the google libraries being loaded in chrome debug, however the map will not render(because I'm doing something wrong of course heh). Also when I did sencha app refresh I do NOT get any errors, so I think I have all the dependence required.



If someone could point me to how to debug this or tell me what stupid thing I forgot I would be grateful.

Thank you

-Calvin

Main.js page

Ext.define('test.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',
    itemId:'maintabpanel',
    requires: [
        'Ext.ux.google.Map',
        'Ext.MessageBox',
        'test.view.main.MainController',
        'test.view.main.MainModel'
    ],


    controller: 'main',
    viewModel: 'main',


    defaults: {
        tab: {
            iconAlign: 'top'
        },
        styleHtmlContent: true
        
    },


    tabBarPosition: 'bottom',


    items: [
        {
            title: 'Map',
            iconCls: 'x-fa fa-user',
            layout:'fit',
            items:[{
                xtype:'map',
                itemId:'gmaps_viewer',
                 mapOptions : {
                    zoomControl       : true,
                    panControl        : false,
                    rotateControl     : true,
                    streetViewControl : true,
                    mapTypeControl    : true,
                    zoom              : 13,
                    center            : new google.maps.LatLng(38.62452, -90.18514)
                }
                
            }]
        
        }
    ]
});

[richardvd]

Sencha app refresh will add the new .js files for you, but to also get the new CSS you need to do a build.

Run this for a refresh with a full CSS build: sencha app build development

[calvinjbuster]

Sencha app refresh will add the new .js files for you, but to also get the new CSS you need to do a build.

Run this for a refresh with a full CSS build: sencha app build development

Sir,

I did a development build as you recommended. Still nothing. I am getting some strange warnings on chrome debug however.

Overriding existing mapping: 'Ext.Gadget' From 'Ext.Component' to 'Ext.Widget'. Is this intentional?
log @ ext-modern-all-debug.js?_dc=1490037639111:6101
ext-modern-all-debug.js?_dc=1490037639111:6101

and

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
fetch @ bootstrap.js:861


Don't think they have to do with anything however I wanted to put that out there.

I'm going to try looking at the events for Maps.js and see if one of the listeners can get me some where.




Thank you for your time sir.

-Calvin

[calvinjbuster]

Hello.

First thanks for a great product. I'm have been a long time user of some of your older versions and just started with 6.2 modern tool kit. I was trying to incorporate google maps into a tab panel with little success. I can see the google libraries being loaded in chrome debug, however the map will not render(because I'm doing something wrong of course heh). Also when I did sencha app refresh I do NOT get any errors, so I think I have all the dependence required.



If someone could point me to how to debug this or tell me what stupid thing I forgot I would be grateful.

Thank you

-Calvin

Main.js page

Ext.define('test.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',
    itemId:'maintabpanel',
    requires: [
        'Ext.ux.google.Map',
        'Ext.MessageBox',
        'test.view.main.MainController',
        'test.view.main.MainModel'
    ],


    controller: 'main',
    viewModel: 'main',


    defaults: {
        tab: {
            iconAlign: 'top'
        },
        styleHtmlContent: true
        
    },


    tabBarPosition: 'bottom',


    items: [
        {
            title: 'Map',
            iconCls: 'x-fa fa-user',
            layout:'fit',
            items:[{
                xtype:'map',
                itemId:'gmaps_viewer',
                 mapOptions : {
                    zoomControl       : true,
                    panControl        : false,
                    rotateControl     : true,
                    streetViewControl : true,
                    mapTypeControl    : true,
                    zoom              : 13,
                    center            : new google.maps.LatLng(38.62452, -90.18514)
                }
                
            }]
        
        }
    ]
});

FIXED IT!!!

Got some help from Professor David Marsland, I was missing the requirement to have "google" added to the required packages in app.json. I'm going to look up the documentation of when you need to edit that file because I had no idea you needed to do that.

Thanks
-Calvin

[richardvd]

It crossed my mind to tell you that, but then you said:

I can see the google libraries being loaded in chrome debug

Or do you load the Google scripts manually? (no need to, the map component already takes care of that)

Anyway, I'm glad you got it to work!

Regarding the synchronous load warning, you may want to check for missing requires.

[britoyen]

Hi...


I have tried with the solution that you mention, but in my case it has not worked for me.

So I have it in my app.json

"requires": [
  "font-awesome",
    "google",
    "ux"
],

And I still get this error when run sencha app refresh or build :

Sencha Cmd v6.2.2.36
[INF] Using GPL version of Ext JS version 6.2.0.981 from /Users/britoyen/Sites/Practicas/pruebas/ExtJS/ExtJS6/GMap/ext.
[INF] The implications of using GPL version can be found here (http://www.sencha.com/products/extjs/licensing).
[INF] Processing Build Descriptor : classic
[INF] Loading compiler context
[INF] Loading app json manifest...
[ERR] Failed to resolve dependency Ext.ux.google.Map for file testGMap.view.map.Mapa
[ERR] 
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.ux.google.Map
[ERR] 
[ERR] Total time: 9 seconds
[ERR] The following error occurred while executing this line:
/Users/britoyen/Sites/Practicas/pruebas/ExtJS/ExtJS6/GMap/.sencha/app/build-impl.xml:380: The following error occurred while executing this line:
/Users/britoyen/Sites/Practicas/pruebas/ExtJS/ExtJS6/GMap/.sencha/app/init-impl.xml:384: com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.ux.google.Map

Please any idea or solution?


P.D.: Sorry, but my english not is very good.

[AvanishBajpai]

Hello calvinjbuster
I followed your code but still i am not able to build my app .
its showing error

C2008: Requirement had no matching files (Ext.ux.google.Map)
BUILD FAILED
ClassRequire::Ext.ux.google.Map

This is my app.json

"requires": [
        "font-awesome",
        "ux",
        "google"
]

And i am using Ext version 6.2.0 and i have not added any script file in my index html

what could be the issue ? Any help would be appreciated

[AvanishBajpai]

i am facing same problem with ext version 6.2.0 . did you find any solution

[richardvd]

This component is only available in the Modern toolkit.

[AvanishBajpai]

Thanks richardvd for quick reply .

do i need to use - gmappanel if i want to use maps in classical toolkit or there is any other way .