PDA

View Full Version : problem with panTo() & google maps on tabpanel



jk171505
6 Apr 2012, 4:12 AM
I have the tabpanel with 4 tabs. The last one is google map view:


Ext.define("Sencha.view.cinema.CinemaMapView", {
extend:"Ext.Map",
xtype:"cinemamapview",


config:{
//useCurrentLocation:true,
mapOptions:{
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
});

I am trying to set a new position on the map via controller:


Ext.define("Sencha.controller.CinemasController", {
extend: "Ext.app.Controller",


config: {
routes: {

},
refs: {
cinemalistcontainer: 'cinemalistcontainer',
showOnMap: 'button[action=showOnMap]',
cinemamapview: 'cinemamapview'


},
control: {
showOnMap: {
tap: 'onShowOnMap'
}
}
},


onShowOnMap: function() {
this.getCinemalistcontainer().push({
xtype: 'cinemamapview'
});


var addressToShow = new google.maps.LatLng(37.44885, -82.158592);
this.getCinemamapview().getMap().panTo(addressToShow);
}
});


But Map doesn't react...
I can set new zoom via the controller:


this.getCinemamapview().getMap().setZoom(17);

then, after:


this.getCinemamapview().getMap().getZoom();

console displays updated zoom: 17

...But map isn't zoomed...

Does anyone has an idea what I am doing wrong or where the problem is?

mitchellsimoens
6 Apr 2012, 5:28 AM
The issue is getMap() should return the google map instance so it's not our code.

jk171505
6 Apr 2012, 6:01 AM
I compared this with example in the sencha docs.
The map is used almost the same way, but in my case the the map view extends from Ext.Map:


Ext.define("Sencha.view.cinema.CinemaMapView", {
...
}


, and I case of sencha example, the map is created like:


var mapdemo = Ext.create('Ext.Map', {
...
}

In my code, this.getCinemamapview().getMap() return and instance, and it looks almost the same. The console log gives me this (console.log(this.getCinemamapview().getMap());):
sh


A: W
C: mh
Xb: Kf
Yb: Df
__e3_: Object
b: HTMLDivElement
center: Q
controls: Array[13]
e: Df
features: W
gm_accessors_: Object
gm_bindings_: Object
ke: Df
mapTypeId: "roadmap"
mapTypes: Qf
n: Rf
navigationControl: true
navigationControlOptions: Object
overlayMapTypes: Kf
pe: Df
qe: Df
streetView: mh
tilt: 0
zoom: 17
__proto__: c
and this is what I get from the sencha's example (console.log(mapdemo.getMap());):
W


A: W
C: W
Xb: W
Yb: Df
__e3_: Object
b: HTMLDivElement
center: Q
controls: Array[13]
e: Df
features: W
gm_accessors_: Object
gm_bindings_: Object
ke: Df
mapTypeId: "roadmap"
mapTypes: W
n: Rf
navigationControl: true
navigationControlOptions: Object
overlayMapTypes: W
pe: Df
qe: Df
streetView: W
tilt: 0
zoom: 17
__proto__: W

jk171505
6 Apr 2012, 6:16 AM
Mitchell, there is one more thing - the sencha example and my app are connected to the same sdk.
the panTo() method is called the same way.
The only difference I did notice is that I am extending the Map in the view, and in the example, the instance is created within the Ext.Application, in the launch function.

The (__proto__: ) looks different...
What do you think about this?

jk171505
6 Apr 2012, 8:20 PM
calling:


console.log(this.getCinemamapview().getMap());


gives me this:

CinemasController.js:60 (http://localhost/st2/projects/Multikino/app/controller/CinemasController.js?_dc=1333771993057)
sh


A: W
C: mh

O: HTMLDivElement
Yb: Df
__e3_: Object
controls: Array[13]
enableCloseButton: true
gm_accessors_: Object
gm_bindings_: Object
j: W
pov: zf
visible: false
__proto__: c

Xb: Kf
Yb: Df
__e3_: Object
b: HTMLDivElement
center: Q
controls: Array[13]
e: Df
features: W
gm_accessors_: Object
gm_bindings_: Object
ke: Df
mapTypeId: "roadmap"
mapTypes: Qf
n: Rf
navigationControl: true
navigationControlOptions: Object
overlayMapTypes: Kf
pe: Df
qe: Df
streetView: mh
tilt: 0
zoom: 12
__proto__: c

N: function (){return this[a]}
fitBounds: function (a){var b=this;S(xe,function(c){c.fitBounds(b,a)})}
getBounds: function (){return this.get(a)}
getCenter: function (){return this.get(a)}
getDiv: function (){return this[a]}
getHeading: function (){return this.get(a)}
getMapTypeId: function (){return this.get(a)}
getProjection: function (){return this.get(a)}
getStreetView: function (){return this.get(a)}
getTilt: function (){return this.get(a)}
getZoom: function (){return this.get(a)}
panBy: function (a,b){var c=this.A;S(xe,function(){R[s](c,Ne,a,b)})}
panTo: function (a){var b=this.A;S(xe,function(){R[s](b,Oe,a)})}
panToBounds: function (a){var b=this.A;S(xe,function(){R[s](b,"pantolatlngbounds",a)})}
setCenter: function (c){b(c)||aa(ja("Invalid value for property <"+(a+(">: "+c))));this.set(a,c)}
setHeading: function (c){b(c)||aa(ja("Invalid value for property <"+(a+(">: "+c))));this.set(a,c)}
setMapTypeId: function (c){b(c)||aa(ja("Invalid value for property <"+(a+(">: "+c))));this.set(a,c)}
setStreetView: function (c){b(c)||aa(ja("Invalid value for property <"+(a+(">: "+c))));this.set(a,c)}
setTilt: function (c){b(c)||aa(ja("Invalid value for property <"+(a+(">: "+c))));this.set(a,c)}
setZoom: function (c){b(c)||aa(ja("Invalid value for property <"+(a+(">: "+c))));this.set(a,c)}
streetView_changed: function (){this.get("streetView")||this.set("streetView",this.C)}
__proto__: c



so it looks like the getMap() return the instance to the google map...

And still, calling:


var addressToShow = new google.maps.LatLng(37.44885, -82.158592);
this.getCinemamapview().getMap().panTo(addressToShow);


doesn't update the map.
Any ides what can be wrong?

meera.bavadekar
10 Apr 2012, 4:07 PM
I had similar problem. The map implementation isn't well documented and is buggy..
Here is how I solved it..

mapPanel = Ext.create('Ext.Map', {
title: "Map",

listeners: {
'maprender': function(comp, map) {
this.map = map;
}


},

Now, panTo can find map property and it works.

jk171505
11 Apr 2012, 6:30 AM
I had the same problem today and noticed that there is a problem when I try to pan or set center of the map via controller.

When I set refs, I can get the map instance and so on, (getMap()) but for some reason panTo() just doesn't work. The same thing happens when I set directions.

I was able to panTo, setCenter, and also display directions without any problems but within a view, using listeners connected to buttons.
I was even able to accomplish this from container (Ext.navigation.View) in which the map (Ext.Map). Everything worked fine.

When I try to do this via controller (MVC approach) map doesn't react. Can't pan, set center or display directions - nothing. And not even one error.

When I display map object console.log(mapview.getMap() ) I get the same object in both cases - either from within a view or via controller.

Anyone resolved this problem?

jk171505
11 Apr 2012, 10:01 AM
Thanks, I tried this, and it didn't help...

As I described in other post, I am able to control the map inside the mapview.

The problems is when I set the 'refs' to the map in controller, and trying to control it. Map just doesn't react. I can reach the map via getMap() - this.getMap() in the mapview, or via this.getTherefsname().getMap() in the controller (where the therefsname is the reference set to the mapview in 'refs'). In both cases there is the same view, but when accessed from controller there is a problem with rendering the map... I quess...