Sencha Touch 2 + Maps Api - fitbounds() doesn't work - google-maps

Question

im trying to set the center of my google maps to my 2 defined Markes with Google Map Api V3.
But it centers just the first marker, the locationmarker.
i have this code that renders a map:
openShops : function(data) {
if (Ext.ComponentManager.get('shops-details') == undefined) {
Ext.create('Oxfam.view.ShopsDetails');
}
var shopsDetailsPage = Ext.ComponentManager.get('shops-details');
Ext.Viewport.setActiveItem(shopsDetailsPage);
var bounds;
var map = Ext.create('Ext.Map', {
id : 'shopMap',
xtype : 'map',
useCurrentLocation : {
autoUpdate : false
},
listeners : {
maprender : function(comp, map) {
var image = 'img/oxfamLogoSmall.png';
var locationMarker = new google.maps.Marker({
position : new google.maps.LatLng(this._geo
.getLatitude(), this._geo.getLongitude()),
map : map
});
var shopCoord = new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude'));
var locCoord = new google.maps.LatLng(this._geo
.getLatitude(), this._geo.getLongitude());
bounds = new google.maps.LatLngBounds();
var shopMarker = new google.maps.Marker({
position : new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude')),
map : map,
icon : image
});
bounds.extend(shopCoord);
bounds.extend(locCoord);
console.log(shopCoord);
map.fitBounds(bounds);
},
}
});
shopsDetailsPage.setItems(map);
}
The log logs the right coordinates.
The map shows this:
click here to see the map
but my wish is like this:
click here to see my wish
I dont know what to do, i mean im searching for an solution since hours, but every solution in the net isnt working in my application..
Anyone have any idea what I'm doing wrong?
I hope im posting every information you need to help my weak development experience ;)

Answer 1

This looks to me like you've got latitude and longitude the wrong way round:
var shopCoord = new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude'));
And again here:
var shopMarker = new google.maps.Marker({
position : new google.maps.LatLng(sessionStorage
.getItem('longitude'), sessionStorage
.getItem('latitude')),
map : map,
icon : image
});
If this is the case (and you've not just mis-labelled the variables in your 'sessionStorage' object) then this will affect the bounds, which is possibly the problem.

Answer 2

Got the Answer.
Thanks for everyone.
The Problem was, that
useCurrentLocation : {
autoUpdate : false
},
automatically centers the locationMarker.
I solved ist by using the html5 geolocation without the sencha touch implemented location method.
Thanks for helping guys!