CODEWITHSUNDEEP
javascriptgoogle-mapsextjs
Marco
Marco

Reputation: 1334

Ext Js 4 gmappanel change center dynamically

I've a simple gmappanel (extjs 4.1.1). How to change the "center" of the map and refresh my window with the center in new coordinate?

My code is:

Ext.Loader.setConfig({
        enabled : true
    });
Ext.require(['Ext.window.*', 'Ext.ux.GMapPanel']);

Ext.define('AM.view.gmapwindow.GoogleMap', {
extend : 'Ext.window.Window',
alias : 'widget.gmapw',
autoShow : true,
title : 'map',
closeAction : 'hide',
width : 460,
height : 500,
border : false,
x : 40,
y : 60,
items : [{
            layout : {
                type : 'hbox',
                align : 'stretch'
            },
            flex : 1,
            items : [{
                        xtype : 'textfield'
                    }, {
                        xtype : 'button',
                         handler: function() {
//--------------------
//modify here the center 
//geoCodeAddr:'Suisse Romande, Avenue de la Gare, Sion, Svizzera'
//---------------------
                            }
                    }]
        }, {
            width : 450,
            layout : 'fit',
            height : 450,
            border : false,
            items : {
                xtype : 'gmappanel',
                center : {
                    geoCodeAddr : '4 Yawkey Way, Boston, MA, 02215-3409, USA'

                },

                markers : []
            }
        }]

});

the map is well shown, but if i try to change the center editing

geoCodeAddr

with the following code

this.up('gmapw').down('gmappanel').center.geoCodeAddr='Suisse Romande, Avenue de la Gare, Sion, Svizzera';

nothing happens.

any ideas?

Thank you

Upvotes: 2

Views: 1661

Answers (2)

Arun V
Arun V

Reputation: 590

If you look at GMapPanel.js, you will see that in afterFirstLayout(), geoCodeAddr is used when creating the map. Setting it after layout is not going to do anything since afterFirstLayout() won't be called again.

You should geocode your address and use that to set the center on the map. Something like the following should work:

var map = this.gmap;
var geocoder = new google.maps.Geocoder();
var request = {address: 'Suisse Romande, Avenue de la Gare, Sion, Svizzera'};
var callBack = function(geocoderResults, geocoderStatus) {
    if(geocoderStatus === 'OK') {
        var location = geocoderResults[0].geometry.location;
        var latLng = new google.maps.LatLng(location.lat(), location.lng());
        map.setCenter(latLng);
    }
}
geocoder.geocode(request,callBack);

Upvotes: 3

Marco
Marco

Reputation: 1334

I've modify Arun V answer to make it full working for my example.

Thank you again Arun V:

var request = {address: 'Suisse Romande, Avenue de la Gare, Sion, Svizzera'};
var callBack = function(geocoderResults, geocoderStatus) {
    if(geocoderStatus === 'OK') {
        var location = geocoderResults[0].geometry.location;
        var latLng = new google.maps.LatLng(location.lat(), location.lng());
        //get current Id from document useful if you have more than one map
        //you can't use "this.gmap" reference here because it's not in your scope
        var idMapW = this.document.activeElement.id;
        Ext.ComponentQuery.query('#'+idMapW)[0].down('gmappanel').gmap.setCenter(latLng);
        }
    };
    this.up('gmapw').down('gmappanel').geocoder.geocode(request,callBack);

Upvotes: 1

Related Questions