1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default Adding Google Map to Archtect ExtJS Project

    Adding Google Map to Archtect ExtJS Project


    Since there is no "gmappanel" option in the Architect toolbox, I need to know how I can create a map component.

    I'm new to using Architect, so I'm not sure if I need to import custom components, or how I would even do that.

    To give an idea of what I need, I have a set of locations (with longitude/latitude). I need to put markers on a map for all these locations and center it so all of them are showing on the map.

    Any help would be greatly appreciated.

  2. #2
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    I recently added google maps to my latest extjs 4.2 project using this component. Look at the source files. Straight forward implementation just don't expect to see your map in the IDE. Otherwise, works fine. John
    I love being a dad (5 & 7), flying airplanes (KBED) and writing code (spaghetti).
    BostonMerlin aka John Bond aka JB
    See U @ SenchaCon '13

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    Thanks, but I don't know how to get this into my Architect application. Do I create a panel called "GMapPanel" and try to mimic that code? If so, how do I add the "initcomponent", "afterrender", ect. to the panel in Architect? I don't think it allows that.

  4. #4
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    in architect, set a reference to the gmappanel.js file referenced in that page I linked to. add a another reference to https://maps.google.com/maps/api/js?sensor=true. in the render event of the container you want to show a map, do something like so:

    Code:
    //CREATE MAPmapwin = Ext.create('Ext.container.Container', {
        itemId: 'mapWin',
        autoShow: true,
        layout: 'fit',
        width:100,
        height:200,
        border: false,
        items: {
            xtype: 'gmappanel',
            itemId: 'gMapPanel',
            gmapType: 'map',
            listeners:{
                'mapready':{scope:this,
                    fn: function(){
    
    
                        this.updateMap();
    
    
                    }
                }
            },
            plain: true,
            zoom: '1',
            center: {
                geoCodeAddr: location
            }
        }
    });
    
    
    this.add(mapwin);
    I love being a dad (5 & 7), flying airplanes (KBED) and writing code (spaghetti).
    BostonMerlin aka John Bond aka JB
    See U @ SenchaCon '13

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    I have the GMapPanel.js in my application. I have the GoogleMapAPI referenced as well.

    I need to show the map within a non floating container. I have the container created called "maparea". I'm attempting to run similar code to the code you provided.

    maparea.add(mapwin);

    I'm getting an error on the following line in the GMapPanel.js:

    this.gmap = new GMap2(this.body.dom); Uncaught ReferenceError: GMap2 is not defined

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    0
    abram.darnutzer is on a distinguished road

      0  

    Default


    Found the solution. I was using the V3 API. So, need to use the GMapPanel3.js object.

    Thanks.

  7. #7
    Sencha User
    Join Date
    Apr 2010
    Posts
    2
    Vote Rating
    0
    mcclung is on a distinguished road

      0  

    Default How did you add the gmaps reference?

    How did you add the gmaps reference?


    Hi, if Iadd https://maps.google.com/maps/api/js?sensor=true as a JS source in architect, I get the following error:
    alert("The Google Maps API server rejected your request. The \x27sensor\x27 parameter specified in the request must be set to either \x27true\x27 or \x27false\x27.")

    What am I doing wrong?
    I also tried
    https://maps.googleapis.com/maps/api/js?key={key}&sensor=false
    and got the same error.

    Thanks

  8. #8
    Sencha Premium Member RiaanSA's Avatar
    Join Date
    Mar 2012
    Location
    Centurion South Aftica
    Posts
    70
    Vote Rating
    0
    RiaanSA is on a distinguished road

      0  

    Default


    Quote Originally Posted by mcclung View Post
    Hi, if Iadd https://maps.google.com/maps/api/js?sensor=true as a JS source in architect, I get the following error:
    alert("The Google Maps API server rejected your request. The \x27sensor\x27 parameter specified in the request must be set to either \x27true\x27 or \x27false\x27.")

    What am I doing wrong?
    I also tried
    https://maps.googleapis.com/maps/api/js?key={key}&sensor=false
    and got the same error.

    Thanks
    I get the same issue.

    When you do paste that link in Google Chrome Address bar it works. Using the JS source it does not work. Almost like the JS source ignore parameters.

  9. #9
    Sencha User
    Join Date
    Sep 2013
    Posts
    5
    Vote Rating
    0
    ram.pekam is on a distinguished road

      0  

    Default Google Places Auto-complete in extjs4

    Google Places Auto-complete in extjs4


    I am using extjs4 and Spring at server side. I need to integrate Google Places Auto-complete inside one of the extjs4 form. Is there any way this can be done. I am not sure weather we can integrate Google Auto-complete with extjs I have searched but not find anything more specific to my requirement. Please guide me ..... look at my code ...


    Ext.define('abce.view.ReportMissing', {extend : 'Ext.panel.Panel',alias : 'widget.report_missing',bodyPadding : 10,autoScroll : true,frame : true,items : [{ id : 'report_form', xtype : 'form', frame : true, defaultType : 'textfield', items : [{ xtype : 'combobox', store : new Ext.data.Store({ autoLoad : true, //fields : ['memberName', 'email'], proxy : { type : 'ajax', headers : { 'Content-Type' : 'application/json', 'Accept' : 'application/json' }, url : 'http://maps.googleapis.com/maps/api/geocode/json?address=hyd+&sensor=false', remoteSort : true, method : 'GET', reader : { type : 'json', successProperty : 'status' } } }) }]