Geo Location with HTML5 and Jquery
Wall Script
Follow Me:
Tuesday, June 07, 2011

Geo Location with HTML5 and Jquery

Last few days I have been working with HTML5 elements, it’s very interesting. This post explains you how to get geo location latitude and longitude values using Jquery. I found a geocode location script from html5demos.com and I have customized bit of code. It is useful you can built foursquare kind of location check out web application.

Geo Location with Jquery

Live Demo     Mobile Live Demo

JavaScript code
Contains Google Map + HTML5 code. Using jquery cookie plugin storing latitude an longitude values $("#check").click(function(){})- check is the ID name of Check-out button.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
function success(position)
{
var s = document.querySelector('#status');
if (s.className == 'success')
{
return;
}
s.innerHTML = "Found you!";
s.className = 'Success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '100%';
mapcanvas.style.width = '100%';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
$.cookie("MyLat", position.coords.latitude); // Storing latitude value
$.cookie("MyLon", position.coords.longitude); // Storing longitude value
}
function error(msg)
{
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'Fail';
}
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error('Not supported'); //HTML Support
}

//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
var lat = $.cookie("MyLat");
var lon = $.cookie("MyLon");
alert('Latitued: '+lat);
alert('Longitude: '+lon);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
alert('Google Map API: '+url);
//Get Json Request Here
});
});
</script>
//HTML Code
<input type='button' id='check' value='Check-out'/>
<div id="status">Loading.............</div>
<div id="map"></div<

Google Geocoding API allowing 2,500 geolocation requests per day so that I dropped Google map JSON parsing with jquery. (Google Maps API Premier allows 100,000 requests per day.)
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


56 comments:

  1. From the PC it shows the city...

    If I view the page with a GPS enabled mobile... will it show the exact location.

    ReplyDelete
  2. a related example:

    http://www.headtagger.com/lesie2/map.html

    ReplyDelete
  3. would there be a request limit ... if you just want to get the lat and lon position?

    ReplyDelete
  4. From Xperia Arc (Android 2.3.3) it only says failed.

    ReplyDelete
  5. Good Tutorial !

    ReplyDelete
  6. Hi Srinivas

    map not displaying in demo only showing Loading...

    ReplyDelete
  7. HTML5 supports Chrome and Firefox latest versions.

    ReplyDelete
  8. Hello,
    On a PC (Firefox 4) I get some alerts: "Latidude:null", "Longitude:null" and "Google Map API: http://maps.googleapis.com/maps/api/geocode/json?latlng=null,null&sensor=false"
    On iPhone 4 I get two "null" alerts
    Any clue? Thanks...

    ReplyDelete
  9. not found in chrome... faild.

    No me funciono en Chrome, y tengo la ultima version.

    ReplyDelete
  10. @Ivan

    Problem with jquery.cookie.js plugin

    ReplyDelete
  11. Hi Srinivas, is it a problem of mine? Should I delete the cookies?

    ReplyDelete
  12. HTML5 Geolocation isnt work on iPhone. Andd on Safari Mac just if you have a wireless connection.

    ReplyDelete
  13. thanks, that a good tutorial

    ReplyDelete
  14. Hi,

    Live demo is not working properly.

    Its showing failed message.

    Ramji

    ReplyDelete
  15. Nice but how do i add it to my blog.

    ReplyDelete
  16. You also can use this plugin http://gmap3.net

    It manages both JQuery and geo-localisation

    ReplyDelete
  17. hihihi...
    <div id="map"></div<
    hehehe...<

    ReplyDelete
  18. Success: On the PC - Firefox 4, running the demo, I get a top bar that asks to "share location". After clicking the button, the demo pops up the Google Map and finds my exact location (Very Cool!) and I can pull up the Long/Latt.

    Fail: If viewing the Mobile Demo on my iPhone, I see the check out box but nothing happens, just get the two null popup boxes.

    ReplyDelete
  19. @Sage

    Enable your browsers cookie storing option

    ReplyDelete
  20. demo is working fine in firefox 3.5
    it shows my exact location!!

    ReplyDelete
  21. Thank you, so I need it for work.

    ReplyDelete
  22. hi srinivas,
    You said that Google not allowing 2500 API requests in a day.But Using JSON Is also any limit in using Google Map?

    Please give ...

    ReplyDelete
  23. you are such a life saver. thanks for this. i was searching for this kind of tuts. actually i was trying to load the whole database to get the geo location... it was boring.. thanks again. nice tuts.

    ReplyDelete
  24. Good stuff Srinivas. Can you point me to the documentation which states Google only allows 2500 geolocation requests per client? I found the documentation which talks about 2500 geocoding requests per IP but i've been searching for hours for request limit documentation on geolocation. I know the operation must be expensive on their end but I can't see how they can restrict something like that when it's built into the HTML5 spec.

    ReplyDelete
  25. good tutorial, i was looking for that!

    ReplyDelete
  26. Nice but it dont work with internet explorer

    ReplyDelete
  27. Good tutorial. It works with FF and Chrome. De mobile version doesn't work on mij iPhone 3GS and Blackberry 9800 Torch

    ReplyDelete
  28. thanks this is what I was looking for. :D

    ReplyDelete
  29. working on my IPhone!

    Is this app will support on all mobile phone with gps enabled?

    ReplyDelete
  30. I try import gmail using you'r source, why result??
    Server error
    The website encountered an error while retrieving. It may be down for maintenance or configured incorrectly.
    Here are some suggestions:
    Reload this webpage later.
    HTTP Error 500 (Internal Server Error): An unexpected condition was encountered while the server was attempting to fulfill the request.

    Any body help me?? Is need adding configuration on php.ini in server hosting??

    Thanks before.

    ReplyDelete
  31. it says $.cookie is not a function

    ReplyDelete
  32. hiiiiiiiiiii im nt geeting the latitude longitude on clicking on check out.ipasted the same code above is there any changes ..im new to jquery plz do reply fast

    ReplyDelete
  33. Hi, Is it possible to make this into a store locator. The list could be pulled from a xml file or something.

    ReplyDelete
  34. How can I put more markers?
    Thank you

    ReplyDelete
  35. Hi!
    How do I save location in a database?

    ReplyDelete
  36. Awesome application, I am new to use and i like it very much..

    Thanks for this.

    ReplyDelete
  37. can u show me how to using jquery mobile + html5 to show Open Street Map

    tanks before

    ReplyDelete
  38. can this source code auto detect location and display place nearest

    ReplyDelete
  39. well explained
    expecting more examples

    ReplyDelete
  40. Great Scrip thanks for the Share Srinivas :)

    ReplyDelete
  41. Useful Hacks...Thumbs Up!!!

    ReplyDelete
  42. Hi srinivas. I tried same code but i am not getting the out put .I am getting Failed,latitude :null,logitude: null.I am new to this ,please let me konw why I am not getting the output and what are the software and hardware requirement for testing this program in pc and mobile(I used windows 7,firefox 8) and mobile device(android samsung galaxy s3 mini,firefox)
    Please help me

    ReplyDelete
  43. how to find my destination location latitude and longitude from my latitude longitude

    ReplyDelete
  44. hi everybody! Tell me please, exmple when some user load webpage then where can I see geopositin this user which came on my website?

    ReplyDelete
  45. Please answer me somebody. I put this code on my website, all work but where can I take or see then this cookie? Where I should look this cookies? Please help me!

    ReplyDelete
  46. can it be possible to save current location to some server.. periodically

    ReplyDelete
  47. hi, how to find my destination location latitude and longitude from my latitude longitude, Anyway Thanks for anther Quality Tutorials

    ReplyDelete
  48. Hi SRINIVAS, Good tutorial man, but i have an inquiry here about how to add some coordinates with custom marker on the map to be shown when i reach specific place, or when zoom out.

    ReplyDelete

Make in India