In order for a Web-based App to access the GPS within your iPhone or Android device, you need to access the PhoneGap API layer. PhoneGap has done much of the dirty work for you, and all you need to do is call the plugin to get longitude and latitude values like so:
navigator.geolocation.getCurrentPosition(win, fail);
After you do that, you just plug the values into the Google Maps API v3. In the code above, if you successfully retrieve coordinates, the win() function will be called. If not, obviously the fail() function will be called. Here are those two functions bundled together.
function checkLocation() {
var win = function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var myOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map_element = document.getElementById("map_canvas");
map = new google.maps.Map(map_element, myOptions);
};
var fail = function(e) {
$.mobile.hidePageLoadingMsg();
alert('Can\'t retrieve position.\nError: ' + e);
};
watchID = navigator.geolocation.getCurrentPosition(win, fail);
}
And that is pretty much it! You can customize some of the map properties, like playing with the zoom values between 1 and 18. Oh and the map_canvas is just a plain HTML div tag.
About the Author: Sprawl
Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.
This helped so much. I was stupidly trying to use Google’s API v2 instead of v3… so much easier!!
Yeah it took me a little while to work out all the different APIs as well. v3 is sooooo much easier!
Hi Sprawl
Great site!
If you are using just jquerymobile and not phonegap – have you seen any tutorials on how you can use geolocation to show a users location which you could then plot on a google map with directions to the business address – which would be perfect for a mobile app – as you are likely to use this feature when you are lost in a city and are trying to find the business location.
You are looking for the jquery libraries for Google Maps API
http://code.google.com/p/jquery-ui-map/
I do believe all of the concepts you’ve offered on your post. They are very convincing and can certainly work. Nonetheless, the posts are very short for starters. May just you please prolong them a bit from subsequent time? Thanks for the post.
Sorry that my musings can be short at times. My tutorials are more blogs then a learning site to be published as a book.
Thank you for every other magnificent post. The place else may just anyone get that kind of information in such an ideal manner of writing? I’ve a presentation subsequent week, and I am on the look for such info.
This site is all you need? lol, I wish. Try the forums at http://jquerymobile.com
Thanks for sharing your opinions and thoughts this is great article!
Thanks for dropping by!
Thanks again for publishing this to help others.
I’m getting the error “ReferenceError: can’t find variable Google”. I assume this is because I’ve not included a script reference to the Google Javascript API. I did not include this because I was under the impression Phonegap sorts that all out for you and besides, the Google docs state you need to put your API key in the string (which I don’t have – I thought that was no longer necessary on an iPhone?). In addition, I didn’t really want my app to have to reference a remote API every time it loads (as the user won’t always want to load the map).
…and if I do include this:
…then the error goes away, but I still get a blank div 🙁
Damn, the reply box ripped out my script link. It was linking to: http://maps.googleapis.com/maps/api/js?v=3.3&sensor=false
You have to include the google script in your html header or call it from javascript as done in the example.
hi, would there be a way to implement this where a click on the map passed the coordinates instead of geolocation?
thanks
Hi Sir,
If we use google map api’s then we have to pay for them it seems… Is it true?
Best regards,
praveen