PDA

View Full Version : google Map does not redraw correctly



Severance
8 Feb 2012, 2:45 AM
Hello,

When I load the map Panel at first, it works perfectly, but if I load another panel and switch to the map Panel, the map is located at the top left of the screen. (a small map wich not take all the panel area)

thank you for help !

mitchellsimoens
8 Feb 2012, 8:58 AM
Can I get a test case? Also, have you attempted this with the current framework (ST2)?

Severance
9 Feb 2012, 3:10 AM
my code :


App.View.Carte = Ext.extend(Ext.Panel, {

initComponent: function() {

this.carteCourante = new Ext.Map({
id: 'idCarte',
name: 'idCarte',
useCurrentLocation: true,
mapOptions : {
autoUpdate:true
},
listeners: {

maprender : function(comp, map){
/*var location = new google.maps.LatLng(48.867354,2.366631);
var marker = new google.maps.Marker({
map: map,
title: 'Marker Title',
position: location
});*/


}
/*centerchange : function(comp, map){
refreshMap(map);
}*/

}
});

//console.log('Début de création');
var config = {
title: 'Carte',
//layout: 'fit',
fullscreen: true,
//scroll: false,
defaults: {
cls: 'font_body'
},
dockedItems: [{
xtype:'formpanel',
standardSubmit: false,
items: [{
xtype: 'toolbar',
dock: 'top',
cls: 'font_toolbar',
title: 'Carte',
items: [
{
xtype: 'button',
name: 'btBackCarte',
id: 'btBackCarte',
ui: 'back',
text: 'Retour',
iconMask: false,
dock: 'left',
stretch: false,
align: 'left',
handler: this.onBackAction
}
]
}]
}],
items: [
this.carteCourante
]
};

Ext.apply(this, config);
App.View.Carte.superclass.initComponent.call(this);

var geocoder = new google.maps.Geocoder();

// affichage position courante
var geo = new Ext.util.GeoLocation({
listeners: {
locationupdate: function (geo) {
console.log('latitude/longitude: ' + geo.latitude+"/"+geo.longitude);

var latlng = new google.maps.LatLng(geo.latitude, geo.longitude);

geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
/*Ext.getCmp('idCarte').map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: Ext.getCmp('idCarte').map,
position: results[0].geometry.location,
title: titre
});*/
console.log(results[1].formatted_address);

//Ext.getCmp('idCarte').map.setCenter(latlng);

App.views.carte.afficherAdresse(results[1].formatted_address, "Vous");
}
else {
console.log("adresse "+adresse+" non localisable");
}
});
}
}
});


this.afficherAdresse('5 avenue des fleurs Paris 75016', 'test', 'images/maps_usine.png');

//console.log('Fin de création');
},





afficherAdresse: function(adresse, titre, icone){

var geocoder = new google.maps.Geocoder();


geocoder.geocode({'address': adresse}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

console.log("adresse "+adresse+" ok");

Ext.getCmp('idCarte').map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: Ext.getCmp('idCarte').map,
position: results[0].geometry.location,
title: titre,
icon: icone
});

var infoWindowTitre = new google.maps.InfoWindow({
content: titre
});

google.maps.event.addListener(marker, 'click', function(event) {
infoWindowTitre.open(Ext.getCmp('idCarte').map, marker);
});
}
else {
console.log("adresse "+adresse+" non localisable");
}
});



//geo.updateLocation();
},

onBackAction: function(){
//console.log('onBackAction');
Ext.dispatch({
controller: 'recherche',
action: 'showRecherche',
direction: 'right'
})
}

});


Ext.reg('App.View.Carte', App.View.Carte);

If I do this at the beginning of my App, it works :


Ext.dispatch({
controller: 'carte',
action : 'showCarte',
direction: 'left'
});


But If I launch the same code when I click on a button from another panel, the map doesn't redraw correctly.

I have a MVC App to migrate to version 2.0 of Sencha, is it a big work ?

thank you

jjalonso
11 Feb 2012, 2:28 PM
I have one viewport panel with layout card, and have 2 panels attacheds

StartPanel
MapPanel




Ext.define('Mark.view.StartPanel', {
extend: 'Ext.Panel',
id: 'startPanel',
config: {
items: [

/*
* DOCKED ITEMS
*/
{
xtype: 'toolbar',
docked: 'top',
title: 'Mark',
},

/*
* ITEMS
*/
{
xtype: 'button',
id: 'markButton',
text: 'Mark it'
}
],
},
})





Ext.define('Mark.view.MapPanel', {
extend: 'Ext.Panel',
id: 'mapPanel',
config: {
items: [

/*
* DOCKED ITEMS
*/
{
xtype: 'toolbar',
docked: 'top',
title: 'Mark',
defaults: { iconMask: true },
items: [
{
xtype: 'spacer'
},
{
xtype: 'button',
id: 'deleteBtn',
iconCls: 'delete',
}
]
},

/*
* ITEMS
*/
{
xtype: 'map',
useCurrentLocation: true
}
]
}
})



When i change the active item of my viewport to the MapPanel:

First, the slide transition have a big lag when slide..
Second, the Map never is rendered.


Really, its a BUG.
no?

Severance
14 Feb 2012, 2:05 AM
Google maps API works :

google.maps.event.trigger(this.carteCourante.map, 'resize');