Results 1 to 10 of 10

Thread: Google Map Rendering In Extjs 6.2 Modern tool kit

  1. #1
    Sencha Premium User
    Join Date
    Mar 2017
    Posts
    8

    Default Google Map Rendering In Extjs 6.2 Modern tool kit

    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

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

  2. #2
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    255
    Answers
    22

    Default

    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

  3. #3
    Sencha Premium User
    Join Date
    Mar 2017
    Posts
    8

    Default

    Quote Originally Posted by richardvd View Post
    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

  4. #4
    Sencha Premium User
    Join Date
    Mar 2017
    Posts
    8

    Default

    Quote Originally Posted by calvinjbuster View Post
    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

    Code:
    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

  5. #5
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    255
    Answers
    22

    Default

    It crossed my mind to tell you that, but then you said:
    Quote Originally Posted by calvinjbuster View Post
    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.

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Posts
    5

    Default

    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

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

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

    Code:
    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.

  7. #7

    Default

    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
    Code:
    "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

  8. #8

    Default

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

  9. #9
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    255
    Answers
    22

    Default

    This component is only available in the Modern toolkit.

  10. #10

    Default

    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 .

Similar Threads

  1. Replies: 1
    Last Post: 8 Mar 2017, 6:01 PM
  2. Problem rendering Google charts in extjs 4.
    By RashmiBhadsawle in forum Ext: Discussion
    Replies: 0
    Last Post: 11 Jul 2011, 1:29 AM
  3. adding tool tip to a tool in the titile bar for grid in extjs
    By madhuchowdary in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 13 Dec 2010, 7:39 PM
  4. Add a Google Map tool into a tabpanel
    By krystof in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 3 Aug 2010, 7:26 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •