Results 1 to 3 of 3

Thread: Google Map not centered correctly in multiple card layout

  1. #1
    Sencha User
    Join Date
    Nov 2014
    Location
    Bavaria, Germany
    Posts
    4

    Default Answered: Google Map not centered correctly in multiple card layout

    Hello,
    I'm quite new to Sencha Touch, but I love the possibilities of creating mobile web apps with this framework.
    Currently I'm building my first app and I'm struggeling with a strange behaviour. I hope some of you can help me (google couldn't ).

    I have a card layout with 2 cards. On the first card I have a button with the name of a city. Clicking on this button should show the second card with a google map. This works pretty well so far, but the map isn't centered according its coordinates. If I remove the first card the map is centered correctly.

    Here's my view snippet:

    Code:
    Ext.define('DemoApp.view.AboutView', {
        extend: 'Ext.Container',
        xtype: 'about-view',
        requires: [
            'Ext.Map',
            'Ext.TitleBar',
            'Ext.Toolbar'
        ],
        config: {
            layout: 'card',
            items: [{
                xtype: 'titlebar',
                docked: 'top',
                title: 'About',
            },
            {
                xtype: 'panel',
                items: [{
                    html: 'Lorem ipsum'
                },
                {
                    xtype: 'button',
                    itemId: 'btnShowAboutMap',
                    text: 'Name of city',
                    ui: 'plain'
                }]
            },
            {
                xtype: 'map',
                useCurrentLocation: false,
                mapOptions: {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: new google.maps.LatLng(48.13272, 11.62449),
                    overviewMapControl: false,
                    panControl: false,
                    rotateControl: false,
                    streetViewControl: false,
                    mapTypeControl: false,
                    zoom: 12
                },
                listeners: {
                    maprender: function(comp, map) {
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(48.13272, 11.62449),
                            title : 'Test',
                            map: map
                        });
                    }
                }
            }],
        }
    });
    Does anybody have an idea?

    (I know I should create the LatLng object only once for the center and position property , I just copied it for quick testing ...)

    Thanks in advance




  2. I wasted days on this topic haha The solution is pretty simple. You need a simple timout after your paint event and then center. Not before and even diretly in the painted event, without the timeout, is not enought.

    Here's some sample code. This should fix your problem. At least I did it for me

    Map:
    Code:
    {
        xtype: 'map',
        height: '100%',
        id: 'examplemap',
        width: '100%',
        listeners: [{
            fn: function(element, eOpts) {
                console.log('Map Painted');
    
    
                someControllerRef.centerMap();
            },
            event: 'painted'
        }]
    }
    centerMap Function:
    Code:
    mapPainted = Ext.getCmp('examplemap') || this;
    
    
    var LatLng = new google.maps.LatLng(dummyLatitude, dummyLongitude);
    
    
    setTimeout(
        function() {
            mapPainted.setMapCenter(LatLng);
        }, 500);

  3. #2
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default




    I wasted days on this topic haha The solution is pretty simple. You need a simple timout after your paint event and then center. Not before and even diretly in the painted event, without the timeout, is not enought.

    Here's some sample code. This should fix your problem. At least I did it for me

    Map:
    Code:
    {
        xtype: 'map',
        height: '100%',
        id: 'examplemap',
        width: '100%',
        listeners: [{
            fn: function(element, eOpts) {
                console.log('Map Painted');
    
    
                someControllerRef.centerMap();
            },
            event: 'painted'
        }]
    }
    centerMap Function:
    Code:
    mapPainted = Ext.getCmp('examplemap') || this;
    
    
    var LatLng = new google.maps.LatLng(dummyLatitude, dummyLongitude);
    
    
    setTimeout(
        function() {
            mapPainted.setMapCenter(LatLng);
        }, 500);
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  4. #3
    Sencha User
    Join Date
    Nov 2014
    Location
    Bavaria, Germany
    Posts
    4

    Default

    Hi u25771,
    thank you very much for your help. It took a little while for me as a newbie to follow your approach, but it works now.

    If anybody has the same problem, the following code could be the solution:

    view.js
    Code:
                xtype: 'map',
                id: 'mapId',
                useCurrentLocation: false,
                
                mapOptions: {
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    overviewMapControl: false,
                    panControl: false,
                    rotateControl: false,
                    streetViewControl: false,
                    mapTypeControl: false,
                    zoom: 12
                },
                
                listeners: {
                    painted: function() {
                        var position = new google.maps.LatLng(latValue, lngValue),
                            mapPainted = Ext.ComponentQuery.query('#mapId')[0];
                        
                        setTimeout(function() {
                            mapPainted.setMapCenter(position);
                        }, 500);
                    }
                }
    controller.js
    Code:
    launch: function(app) {
            this.createMap();
    },
    
    createMap: function() {
            var position = new google.maps.LatLng(latValue, lngValue),
                  map = Ext.ComponentQuery.query('#mapId')[0];
    
            map.setMapCenter(position);
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •