Map and Geo Location

[umarani]

Hi ,
I am new to sencha and currently working on Rendering the user's current location and showing it in the google map with a marker.. I need a simple example.. i got some examples which works fine in the web browser but not in the device.

Thanks in advance.
Uma

[NickT]

numerous adjustments can be made to change the behavior and visual smoothness however here is a basic example ...

you may have established your current position prior to the rendering of the map itself, in which case you can provide the current position as the center property of the mapOptions. I have determined it on map render on delay of a few seconds for demonstration purposes.... as you can see, there is an ability for the ext map to useCurrentPosition. This example is doing that manually, and dropping the marker simultaneously...

{                        xtype: 'map',
                        mapOptions: {
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        },
                        listeners:{
                            'maprender': function(extMap, googleMap) {
                                var task = new Ext.util.DelayedTask(function() {
                                    if (navigator.geolocation) {
                                        navigator.geolocation.getCurrentPosition(function(position) {
                                                    console.log('marking current location...');
                                                    var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                                                    googleMap.setCenter(currentLocation);
                                                    var marker = new google.maps.Marker({
                                                        animation: google.maps.Animation.DROP,
                                                        map: googleMap,
                                                        position: currentLocation
                                                    });
                                                }, function() {
                                                    console.log('could not obtain geolocation');
                                                });
                                    }
                                }, googleMap);
                                task.delay(3000);
                            }
                        },
                        useCurrentLocation: false
                    }

[umarani]

Hi thanks for the help. i now get this error : Uncaught ReferenceError: google is not defined at ..

[myput]

Hi, try to add:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

in your index.html

[umarani]

hi , i have already added that in my html. and also the map doesn't shows my current location instead it shows the default view Los Altos Hills , Mountain View , so and so

[umarani]

this is what i have done in my js file.

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
 
        
    new Ext.Panel({
            id: 'sample',
            fullscreen: true,
            dockedItems:[{xtype:'toolbar',title:'Map Test'}],
            items:[
					{
						xtype: 'map',
                        mapOptions: {
                            		mapTypeId: google.maps.MapTypeId.ROADMAP
                        			},
                        listeners:{
                            		'maprender': function(extMap, googleMap) 
                            						{
                               		 					var task = new Ext.util.DelayedTask(function() {
                                   						if (navigator.geolocation) 
                                   						{
                                        					navigator.geolocation.getCurrentPosition(function(position) {
                                                    				console.log('marking current location...');
                                                    				var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                                                    				googleMap.setCenter(currentLocation);
                                                   					var marker = new google.maps.Marker({
                                                        				animation: google.maps.Animation.DROP,
                                                        				map: googleMap,
                                                        				position: currentLocation	});
                                                				}, function() {
                                                    				console.log('could not obtain geolocation');
                                               						 });
                                    					}
                                						}, googleMap);
                                						task.delay(3000);
                            						}
                        		},
                        useCurrentLocation: true
                    }]
		});
	}
});

[myput]

Yes for that,

you must set your default params position or center to your current position.

[pratiksha]

The map is showing United States,Sunnywale mountian view instead of my current location. Help me regarding this prob Please !!

[pratiksha]

I din't get what to set default params position or center to your current location. Please explain

[wilzdezign]

For example setting the center location on the map:

var centerp = new google.maps.LatLng(48.006370,-122.20383);

var LocationsPanel = new Ext.Map({
    id: 'panel-locations',
    title: 'Location',
    iconCls: 'locate',
    
    useCurrentLocation: false,
    
    mapOptions: {
        zoom: 16,
        center: centerp,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.DEFAULT
        }
    }
});