google maps sencha touch 2 configuration - google-maps

Question

Hi I am implementing google maps in sencha touch as suggested here:
google maps implementation in sencha touch 2 (the MVC way)
However, when the map appears, it first displays a default location (somewhere in United States) and then re-renders again to show the map according to my configuration. How can I avoid this?
Ext.define('App.view.Map', {
extend: 'Ext.Map',
xtype: 'map',
useCurrentLocation: false,
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
styleHtmlContent: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Location'
}
},
mapOptions: {
center: new google.maps.LatLng(<value>, <value>),
disableDefaultUI: true
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});

Answer 1

You defined map view and extended Ext.Map, so that view becomes map and when you give xtype to your view, It should not be predefined xtype like map, panel, button, etc..
You should learn Ext class system and try this code.
Ext.define('myapp.view.Map', {
extend: 'Ext.Map',
xtype: 'mymap',
config: {
layout: 'fit',
iconCls: 'icon-location',
title: 'Location',
useCurrentLocation: false,
styleHtmlContent: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Location'
}],
mapOptions: {
center: new google.maps.LatLng(<value>, <value>),
disableDefaultUI: true
}
},
constructor: function(config) {
this.callParent(config);
if (!(window.google || {}).maps) {
this.setHtml('<p id="maperror">Internet Connection Required!</p>');
}
}
});

Answer 2

You can set the starting location by adding a "center" option to the map's "mapOptions" config.
{
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(-34.397, 150.644)
}
}
You can just override the Ext.Map class and add your own message.
Ext.define('MyApp.overrides.Map', {
constructor: function() {
this.callParent(arguments);
// this.element.setVisibilityMode(Ext.Element.OFFSETS);
if (!(window.google || {}).maps) {
// do your own thing here
}
}
});