-- FIX -- Sencha Touch does not center Map correctly

Some of you may already have faced this issue. Centering Google Maps does not always work how it should, especially If you use markers. Here is how to fix this issue:


First I we need a map, for example this one here:

	{
	xtype: 'map',
	height: '100%',
	id: 'examplemap',
	width: '100%',
	listeners: [{
	fn: function(element, eOpts) {
	console.log('Map Painted');
	someControllerRef.centerMap();
	},
	event: 'painted'
	}]
	}

view raw sample_map.js hosted with ❤ by GitHub

Now comes the important part. You need to add a listener on your map for the painted event. When the painted event is fired we do also need a timeout to set the center. This can be really small.

	function fixThisCenterProblem() {
	mapPainted = Ext.getCmp('examplemap') || this;
	var LatLng = new google.maps.LatLng(dummyLatitude, dummyLongitude);
	setTimeout(
	function() {
	mapPainted.setMapCenter(LatLng);
	}, 500);
	}

view raw mapcenter_fix_function.js hosted with ❤ by GitHub

This should to it, the map will now be centered correctly.