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

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 ;)

Did you try to set the zoom of the map ? Try map.setZoom(n) with n between 12 and 16. — Titouan de Bailleul, Sep 27 '12 at 09:10
Yes, but the Problem is, that the zoomlevel should be dynamic, because the coordinates arent every time the same. To set the zoomlevel manually can be a problem with showing 2 markers in a wide range between each other, so you can see only on of them. But thanks for your attempt to a solution — DenisK, Sep 27 '12 at 09:24
Is it helping : http://stackoverflow.com/questions/3407723/google-maps-fitbounds-is-not-working-properly ? — Titouan de Bailleul, Sep 27 '12 at 09:36

score 1 · Accepted Answer · answered Sep 27 '12 at 10:33

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.

answered Sep 27 '12 at 10:33

duncan

31,401
13
78
99

Yea youre right. Ive mislabeld it in my sessionStorage. Now i named it right and checked it again. But theres unfortunately the same problem :/ -> locationmarker is centered – DenisK Sep 27 '12 at 11:35
In the bounds object are all the 4 coordinates(2 latitude, 2 longitude) Is it possible that the useCurrentLocation param always center the current location? – DenisK Sep 27 '12 at 11:55
#Thanks for your help. Ive figured out where the problem is: The usecurrentLocation parameter sets the center of the map automatically on the location. If i comment it out and try it with fix coordinates, then it works fine. Now im searching for a solution to disable this "autocenter". – DenisK Sep 27 '12 at 12:44

score 0 · Answer 2 · answered Oct 01 '12 at 04:34

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!

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

2 Answers2