PDA

View Full Version : Map and Geo Location



umarani
30 Sep 2011, 5:08 AM
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
30 Sep 2011, 9:23 AM
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
2 Oct 2011, 9:42 PM
Hi thanks for the help. i now get this error : Uncaught ReferenceError: google is not defined at ..

myput
2 Oct 2011, 11:06 PM
Hi, try to add:

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

umarani
7 Oct 2011, 1:38 AM
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
7 Oct 2011, 3:01 AM
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
9 Oct 2011, 11:03 PM
Yes for that,

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

pratiksha
11 Jan 2012, 8:51 PM
The map is showing United States,Sunnywale mountian view instead of my current location. Help me regarding this prob Please !!

pratiksha
11 Jan 2012, 8:53 PM
I din't get what to set default params position or center to your current location. Please explain

wilzdezign
3 Feb 2012, 11:58 AM
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
}
}
});

pratiksha
6 Feb 2012, 1:17 AM
Thank you