1. #1
    Sencha User Gunmen's Avatar
    Join Date
    Jul 2007
    Posts
    305
    Vote Rating
    0
    Gunmen is on a distinguished road

      0  

    Default Who got Google Maps V3 and Ext JS 4 running?

    Who got Google Maps V3 and Ext JS 4 running?


    Hi there,

    Who got Google Maps V3 and Ext JS 4 running in a window panel?

    I can't get the code of @VinylFox to work. I have added ext-all.js and ext-all.css, and his Ext.ux.GMapPanel3.js. Error: Uncaught TypeError: Object #<Object> has no method 'reg'. I guess the system of registration an extension has changed but not in this extension.

    Is there a good working example?

    Thanks!

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    jbuonagurio is on a distinguished road

      0  

    Default


    I'm having similar problems trying to get Bing Maps working, the map renders fine inside of a panel but maybe I'm not fully understanding this MVC pattern, because I can't figure out how to use methods from outside the Ext.define.

    Code:
    /**
     * Map View
     * @extends Ext.Panel
     */
    
    Ext.define('App.view.Map', {
        extend: 'Ext.Panel',
    	alias: 'widget.mappanel',
    	
    	border: false,
    	initComponent: function() {
    		this.callParent(arguments);
    		this.on('afterrender', this.afterRender, this);
    	},
    	afterRender: function() {
    		var bingMapsKey = 'KEY';
    		var wh = this.ownerCt.getSize();
    		
    		Ext.applyIf(this, wh);
    		this.callParent(arguments);
    
    		this.map = new Microsoft.Maps.Map(
    			this.body.dom,
    			{
    				credentials: bingMapsKey,
    				mapTypeId: Microsoft.Maps.MapTypeId.road,
    				enableClickableLogo: false,
    				enableSearchLogo: false,
    				zoom: 7
    			}
    		);
    	},
    	setLocation: function() {
    		var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(this.map);
    		geoLocationProvider.getCurrentPosition();
    	}
    });
    I guessed from this I'd be able to call App.view.Map.setLocation() but I get the "has no method" error. The map itself works fine though, if you don't need to interact with it you should be able to use Google Maps in the same way.

  3. #3
    Sencha User Gunmen's Avatar
    Join Date
    Jul 2007
    Posts
    305
    Vote Rating
    0
    Gunmen is on a distinguished road

      0  

    Default


    @jbuonagurio: Did you checked GMapPanel of Ext JS community member VinylFox?

  4. #4
    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


    I'm actually working on an ExtJS 4 compatible version right now.

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    jbuonagurio is on a distinguished road

      0  

    Default


    Quote Originally Posted by Gunmen View Post
    @jbuonagurio: Did you checked GMapPanel of Ext JS community member VinylFox?
    Yes I did (thanks VinylFox) and it appears to work similarly, but the variable scoping and inheritance in Ext JS 4 seems to work differently, maybe someone can clarify. For example in GMapPanel3.js the gmap object is defined in the apiReady function:

    Code:
    this.gmap = new google.maps.Map(this.body.dom, {
        zoom: this.zoomLevel,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    The getMap method is then able to return the same object, but it doesn't seem to work this way in Ext JS 4. This code would not work:

    Code:
    getMap : function() {
        return this.gmap;        
    },
    I got around it by just defining gmap (map in my case) as a static variable and calling methods using prototype, e.g. App.view.Map.prototype.getPosition(); but I'm not sure if this is good practice.

  6. #6
    Sencha User Gunmen's Avatar
    Join Date
    Jul 2007
    Posts
    305
    Vote Rating
    0
    Gunmen is on a distinguished road

      0  

    Default


    Quote Originally Posted by VinylFox View Post
    I'm actually working on an ExtJS 4 compatible version right now.
    Whohoo! Do you have a release date in mind?

    I would love to use your extension to dynamically add and remove markers. This is where I'm now working on.

    In the V2 maps extention version I had the problem that I could not center the map without adding a marker in the center (combined setting). I hope in the new version we can center the map without adding a marker.

  7. #7
    Sencha User Gunmen's Avatar
    Join Date
    Jul 2007
    Posts
    305
    Vote Rating
    0
    Gunmen is on a distinguished road

      0  

    Default


    Shea, can you tell how to add markers in the 'old version'? This is what I have so far...

    Code:
    point = new GLatLng(record.data.geo.coordinates[0], record.data.geo.coordinates[1]);
    Ext.getCmp('map').addMarker(point, false, false, false, null);
    How can I add a title? And show a msg or alert when the user clicks on a marker?

  8. #8
    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


    Did you see the createInfoWindow method?

  9. #9
    Sencha User Gunmen's Avatar
    Join Date
    Jul 2007
    Posts
    305
    Vote Rating
    0
    Gunmen is on a distinguished road

      0  

    Default


    Nope, and that is because I'm using the older extension (with Maps V2). Why? Because that is the one I can get to work. In the older version I could not find a createInfoWindow function.

  10. #10
    Sencha User Gunmen's Avatar
    Join Date
    Jul 2007
    Posts
    305
    Vote Rating
    0
    Gunmen is on a distinguished road

      0  

    Default


    And I got it to work via the Maps documentation. Thank you all for your support. And yes, I look forward for further updates of this extension.