PDA

View Full Version : Get current location on map



irocker
18 Jan 2011, 8:30 PM
Hi, I'm trying to do a simple map and use the geolocation, but it just loads the default Mountain View, CA map. the getLocation property doesn't seem to be working... am I missing something? I'm on an iPhone 4 and it never asks me for permission to use my location.



var locmap = new Ext.Panel({
fullscreen: true,
layout: 'fit',
items : [
{
xtype: 'map',
getLocation: true
}
]
});

jep
18 Jan 2011, 9:25 PM
Try useCurrentLocation. You also might want to try your apps in safari or another html5 browser with the javascript console on. You would have gotten an warning that you should use useCurrentLocation.

irocker
18 Jan 2011, 9:34 PM
Oh yes, I neglected to mention that I also tried it with useCurrentLocation and that doesn't work either. I did not get a warning when I tested in Chrome using getLocation, either.

I am getting warnings in the javascript console that the Google maps API is displaying insecure content in a secure page... which is true, but it doesn't stop the map from rendering or anything, so I don't think that's the problem.

jep
18 Jan 2011, 10:17 PM
Ugh. Okay, first off, apparently they used console.warn instead of console.log. Not sure why that doesn't show up on load for either of us. Second, that was a red herring anyway as looking at the code it assigns getLocation to useCurrentLocation anyway.

The ugh part is that I really started looking at the Ext.Map code and it's buggy as hell in this area. It uses a lot of deprecated/non-existent stuff (autoLoad? expecting the locationupdate event to pass you a coord param?), adds the listeners after the geolocation object has already started trying to get the location (which could cause it to miss events) and doesn't bother even putting a timeout so it will just keep going until infinity. Luckily, you can pass in your own GeoLocation object. Here, try this:



<html>
<head>
<title>test</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="sencha/sencha-touch-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.setup({
onReady: function(){

var map = new Ext.Map({
geo:new Ext.util.GeoLocation({
autoUpdate:false,
timeout:1000,
listeners:{
locationupdate: function(geo) {
var center = new google.maps.LatLng(geo.latitude, geo.longitude);

if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});

var panel = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:map
});

}
});

</script>


</head>
<body></body>
</html>


I'll file a bug report for the Ext.Map stuff if I don't find one already.

jep
18 Jan 2011, 10:21 PM
Well, I tried to post a response but it got sent to the moderator, then disappeared. I may have accidentally clicked an X and deleted it. I don't really know. It may have been because I used a dirty word, or because I've been making too many posts helping too many people within too short of an amount of time. I don't know which is more annoying of a prospect.

Anyway, the Ext.Map code is buggy buggy buggy. I had typed out more about this, but don't feel like doing it again. I will post a bug and try to detail it there and link it here.


In the meantime, try this instead:



<html>
<head>
<title>test</title>
<link rel="stylesheet" href="sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="sencha/sencha-touch-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.setup({
onReady: function(){

var map = new Ext.Map({
geo:new Ext.util.GeoLocation({
autoUpdate:false,
timeout:1000,
listeners:{
locationupdate: function(geo) {
var center = new google.maps.LatLng(geo.latitude, geo.longitude);

if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});

var panel = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:map
});

}
});

</script>


</head>
<body></body>
</html>

jep
18 Jan 2011, 10:26 PM
Here's a bug report:

http://www.sencha.com/forum/showthread.php?119688-OPEN-695-Default-Ext.Map-GeoLocation-object-is-initialized-with-an-invalid-option&highlight=Ext.util.GeoLocation

irocker
19 Jan 2011, 8:45 AM
Thanks much for your help jep! That works. It still didn't work in the context of my application, but I simply do a map.update(center) when I activate the map and that fixes it... apparently your on.('activate') doesn't work but if I just refresh it, it does.

Kind of irritating but I can live with it for now...

jep
19 Jan 2011, 8:52 AM
Argh. It's just code I copied out of the other section of Map. Probably another bug! :D

irocker
19 Jan 2011, 6:48 PM
Hmm, well now my problem is that I need to access the "center" variable outside the scope of the function, so I can set a marker. What's the best way to go about this. Simply removing the "var" so that it becomes global doesn't seem to do the trick. I've also tried declaring the variable outside the function. What am I missing here.

jep
19 Jan 2011, 7:02 PM
This works fine for me:



<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/sencha/sencha-touch-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.setup({
onReady: function(){

var center;

var map = new Ext.Map({
geo:new Ext.util.GeoLocation({
autoUpdate:false,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);

if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});

var panel = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:map,
dockedItems:{xtype:'button', text:'click me', handler:function() { alert(center.lat() + ',' + center.lng()) }}
});

}
});

</script>


</head>
<body></body>
</html>


One thing to note - Safari 5 XP has a broken geolocator. This probably won't affect you, but I just thought I'd mention it since I finally bothered to research it.

jep
19 Jan 2011, 7:15 PM
Once again, I got threatened with moderation. No idea what's going on. Reposting it in hopes it will go through. This code works fine for me:



<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/sencha/sencha-touch-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.setup({
onReady: function(){

var center;

var map = new Ext.Map({
geo:new Ext.util.GeoLocation({
autoUpdate:false,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);

if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});

var panel = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:map,
dockedItems:{xtype:'button', text:'click me', handler:function() { alert(center.lat() + ',' + center.lng()) }}
});

}
});

</script>


</head>
<body></body>
</html>

jep
19 Jan 2011, 7:18 PM
Third time's the charm. Here's some code that works for me:



<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/sencha/sencha-touch-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.setup({
onReady: function(){

var center;

var map = new Ext.Map({
geo:new Ext.util.GeoLocation({
autoUpdate:false,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);

if (map.rendered)
map.update(center)
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});

var panel = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:map,
dockedItems:{xtype:'button', text:'click me', handler:function() { alert(center.lat() + ',' + center.lng()) }}
});

}
});

</script>


</head>
<body></body>
</html>

irocker
19 Jan 2011, 7:50 PM
Thanks jep - that is more or less what I did, and it doesn't work. :( The difference is that my code is in a different js file than the main one, and everything in that js file is wrapped in its own function. I tried declaring the variable at the beginning of onReady:function() in my main js file, just like you did, and I also tried declaring it at the beginning of my wrapper function... and then I define center without the "var" in the geo function just as you did... but it's not updating the global variable for some reason. I can do an alert inside the function and center has the longitude and latitude just fine... and the map works just fine... but the minute I get out of that function, center becomes undefined. Or if I declare the global with a value it reverts to that value. WTF.

jep
19 Jan 2011, 8:17 PM
Ah, yeah, then you're going to run into regular javascript scoping issues. Good luck untangling it.

neoswf
29 Nov 2011, 4:09 AM
While testing my app....

naseerkhan
19 Apr 2012, 9:05 PM
Hi this Naseer Khan. I have one small doubt i.e

in the above code locationupdate event is not calling. It automatically locationerror event calling. what is the reason behind it.

Due to this i am not getting the current location. I run this program from browser as well as emulator but it shows default location.


pls help me. Its urgent for me

Thanks in advance

mayankdawar1
18 Mar 2014, 3:48 AM
Hey Jep, I am really new to sencha touch. I need to make webapp which displays my current location and displays it on a map. Can u tell me how it is done ....and which files do i edit exactly in my app.Thanku in advance

jep
18 Mar 2014, 11:34 AM
Sorry, but we really just kind of stopped doing any work with Sencha. This was mainly because they just kept dropping the ball on addressing bugs. It just became much more of a time sink than doing native apps. I still think Sencha is probably the best framework for doing HTML5 mobile work. I don't think that's really a positive for Sencha so much as a negative for HTML5 development. Good luck.