1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    spruitje is on a distinguished road

      0  

    Default Google Maps Marker not Centered

    Google Maps Marker not Centered


    I made a very simple Map view using google.maps.Geocoder + address specifications to show a static map of a given address.

    Everything works well, except that the Marker shows up at the top/left corner of the window; it is NOT centered.

    How could I show the marker in the centered position (which is default if 'useCurrentLocation' is 'true')?

    I've spent ages on this with no result yet, any help is very much appreciated!

    My code:

    Code:
    Ext.define('rcc-app.view.Map', {
    	extend: 'Ext.Map',
    	xtype: 'map',
    	
    	config: {
    		title: 'Locatie',
    		iconCls: 'maps',
    		scrollable: false,
    		//useCurrentLocation: true,
    		mapOptions: {
    			mapTypeId: google.maps.MapTypeId.ROADMAP,
    			zoomControl: true,
    			zoomControlOptions: {
    				style: google.maps.ZoomControlStyle.SMALL,
    				position: google.maps.ControlPosition.RIGHT_BOTTOM,
    			},
    			zoom: 15
    		},
    		
    		listeners: {
            	maprender: function(comp, map) {
            	    var marker;
            	    var geocoder = new google.maps.Geocoder();
            	    geocoder.geocode({
            	        'address': '///My address goes here// Like: Churchstreet 11, London, UK'
            	    }, 
            	    function(results, status) {
            	        if (status == google.maps.GeocoderStatus.OK) {
            	            map.setCenter(results[0].geometry.location);
            	            marker = new google.maps.Marker({
            	                map: map,
            	                position: results[0].geometry.location,
            	                title: "here!",
            	                animation: google.maps.Animation.DROP
            	            });
            	        }
            	    });
            	    
            	}
            },
    		
    		items: {
    			docked: 'top',
    			xtype: 'titlebar',
    			title: 'Locatie'
    		}
    	}
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It's centered for me when I test on Chrome. One issue I see that shouldn't have any affect is you use xtype : 'map' when you extend via Ext.define, Ext.Map uses that xtype so you need to use a different xtype.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    1
    ScottH is on a distinguished road

      0  

    Default


    Try updating your maprender to

    Code:
    maprender: function(comp, map) {
                    var me = this;
                    var marker;
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        'address': '///My address goes here// Like: Churchstreet 11, London, UK' 
                   },
                     function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location,
                                title: "here!",
                                animation: google.maps.Animation.DROP
                            });
                            me.setMapOptions({ center : results[0].geometry.location });
                        }
                    });
    }

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    spruitje is on a distinguished road

      0  

    Default


    Thank you very much ScottH, it's working like a charm!
    Only thing: the marker still starts at the top/left-corner en then immediately slides in to center-position when tested in a desktop-browser like Chrome/Safari.
    The iPhone-Simulator for instance does not show this behaviour, so it suits me fine.
    But why does Chrome/Safari on a desktop does this?
    (Just to understand what Sencha does...)

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    spruitje is on a distinguished road

      0  

    Default


    Thanks mitchell, but the thing is: I call the xtypes in a Main.js-view, so in the Map.js the x-type seems to be required as well to make it all work... or not?
    Code:
    Ext.define('my-app.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
            	{
    	        	xtype: 'homepanel'
            	},
            	{
    	        	xtype: 'info'
            	},
            	{
    	        	xtype: 'contactform'
            	},
            	{
    	        	xtype: 'map'
            	}
            
            ]
        }
    });

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    1
    ScottH is on a distinguished road

      0  

    Default


    Quote Originally Posted by spruitje View Post
    Thank you very much ScottH, it's working like a charm!
    Only thing: the marker still starts at the top/left-corner en then immediately slides in to center-position when tested in a desktop-browser like Chrome/Safari.
    The iPhone-Simulator for instance does not show this behaviour, so it suits me fine.
    But why does Chrome/Safari on a desktop does this?
    (Just to understand what Sencha does...)
    Move the setMapOptions line to before you put the marker down and the map should center itself and then place the marker, removing the sliding effect you're getting.

    Sencha's code relies entirely on the browser's handling of html5, css, & webkit for the functionality, so you will see some inconsistency depending on what you are using to run it at the time. The default browser that is used for Android 4.0 handles webkit like crap so you can end up with any number of performance issues. But using the Chrome browser on the same device (opening the app as a weblink) and you will get beautiful performance. Unfortunately, when you package for native you're stuck with the default browser (least I'm 95% sure of that, I haven't found a solution and have not devoted all that much time to trying to really get around that limitation).

    Just one of those things that you've got to keep an eye out for, as long as it works as desired on your target platform, that's all that really matters, right?

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    10
    Vote Rating
    1
    ScottH is on a distinguished road

      0  

    Default


    Quote Originally Posted by spruitje View Post
    Thanks mitchell, but the thing is: I call the xtypes in a Main.js-view, so in the Map.js the x-type seems to be required as well to make it all work... or not?
    Code:
    Ext.define('my-app.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar'
        ],
        config: {
            tabBarPosition: 'bottom',
    
    
            items: [
                {
                    xtype: 'homepanel'
                },
                {
                    xtype: 'info'
                },
                {
                    xtype: 'contactform'
                },
                {
                    xtype: 'map'
                }
            
            ]
        }
    });
    What mitchell is saying is that there is already a defined xtype of 'map' inside the sencha framework, what you should do is set your original like this...
    Code:
    Ext.define('rcc-app.view.Map', {
            extend : 'Ext.Map',
            xtype : 'mymap',
            config : { ....
    And call it from your tabpanel with
    Code:
     xtype : 'mymap'

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    spruitje is on a distinguished road

      0  

    Default


    Quote Originally Posted by ScottH View Post
    Move the setMapOptions line to before you put the marker down and the map should center itself and then place the marker, removing the sliding effect you're getting.

    Sencha's code relies entirely on the browser's handling of html5, css, & webkit for the functionality, so you will see some inconsistency depending on what you are using to run it at the time. The default browser that is used for Android 4.0 handles webkit like crap so you can end up with any number of performance issues. But using the Chrome browser on the same device (opening the app as a weblink) and you will get beautiful performance. Unfortunately, when you package for native you're stuck with the default browser (least I'm 95% sure of that, I haven't found a solution and have not devoted all that much time to trying to really get around that limitation).

    Just one of those things that you've got to keep an eye out for, as long as it works as desired on your target platform, that's all that really matters, right?
    Ok thanks a lot ScottH and Mitchell for helping me understand things a bit more!

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Posts
    7
    Vote Rating
    0
    spruitje is on a distinguished road

      0  

    Default Map centering breaks after Sencha Touch 2.3.0 update

    Map centering breaks after Sencha Touch 2.3.0 update


    Centering the map worked fine, with this code in Sencha Touch 2.2.1, but after I updated my app to 2.3.0 the map does not center anymore; the marker stays at the top-left corner and does not move to the center anymore.

    How could this be, has something changed to retrieve this in Sencha Touch 2.3.0 ?

    Code:
    Ext.define('my-app.view.Map', {
        extend: 'Ext.Map',
        xtype: 'mymap',
        
        config: {
            title: 'Location',
            iconCls: 'locate',
            scrollable: false,
            //useCurrentLocation: true,
            mapOptions: {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoomControl: true,
                zoomControlOptions: {
                    style: google.maps.ZoomControlStyle.SMALL,
                    position: google.maps.ControlPosition.RIGHT_BOTTOM
                },
                zoom: 12
            },
            
            listeners: {
                maprender: function(comp, map) {
                    var me = this;
                    var marker;
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({
                        'address': '//My address goes here//'
                    },
                    function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            me.setMapOptions({ center : results[0].geometry.location });
                            marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location,
                                title: "Here!",
                                animation: google.maps.Animation.DROP
                            });
                        }
                    });
                }
            },
            
            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Locatie'
            }
        }
    });

  10. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    9
    Vote Rating
    0
    fatica is on a distinguished road

      0  

    Default


    The only thing that worked for me was to delay it slightly

    Code:
    setTimeout(function(){
                                    yourmap.getMap().setCenter(latlngbounds.getCenter());
                                },100);