Geo Location with HTML5 and Jquery
Wall Script
Wall Script
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.)
web notification

58 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. Hi Srinivas

    map not displaying in demo only showing Loading...

    ReplyDelete
  6. HTML5 supports Chrome and Firefox latest versions.

    ReplyDelete
  7. 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
  8. not found in chrome... faild.

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

    ReplyDelete
  9. @Ivan

    Problem with jquery.cookie.js plugin

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

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

    ReplyDelete
  12. thanks, that a good tutorial

    ReplyDelete
  13. Hi,

    Live demo is not working properly.

    Its showing failed message.

    Ramji

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

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

    It manages both JQuery and geo-localisation

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

    ReplyDelete
  17. 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
  18. @Sage

    Enable your browsers cookie storing option

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

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

    ReplyDelete
  21. 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
  22. 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
  23. 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
  24. good tutorial, i was looking for that!

    ReplyDelete
  25. Nice but it dont work with internet explorer

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

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

    ReplyDelete
  28. working on my IPhone!

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

    ReplyDelete
  29. 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
  30. it says $.cookie is not a function

    ReplyDelete
  31. 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
  32. Hi, Is it possible to make this into a store locator. The list could be pulled from a xml file or something.

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

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

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

    Thanks for this.

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

    tanks before

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

    ReplyDelete
  38. well explained
    expecting more examples

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

    ReplyDelete
  40. Useful Hacks...Thumbs Up!!!

    ReplyDelete
  41. 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
  42. how to find my destination location latitude and longitude from my latitude longitude

    ReplyDelete
  43. 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
  44. 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
  45. can it be possible to save current location to some server.. periodically

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

    ReplyDelete
  47. 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
  48. Hai, your article is wonderful .its very useful .thanks to give this.

    ReplyDelete
  49. Its really nice.. good way of presentation..

    ReplyDelete

mailxengine Youtueb channel
Make in India
X