Geo Location with HTML5 and Jquery

damrongsak

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.

1. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
   
2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
   
3. 1.4.2/jquery.min.js"></script>
   
4. <script type="text/javascript" src="jquery.cookie.js"></script>
   
5. <script type="text/javascript">
   
6. function success(position)
   
7. {
   
8. var s = document.querySelector('#status');
   
9. if (s.className == 'success')
   
10. {
    
11. return;
    
12. }
    
13. s.innerHTML = "Found you!";
    
14. s.className = 'Success';
    
15. var mapcanvas = document.createElement('div');
    
16. mapcanvas.id = 'mapcanvas';
    
17. mapcanvas.style.height = '100%';
    
18. mapcanvas.style.width = '100%';
    
19. document.querySelector('#map').appendChild(mapcanvas);
    
20. var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    
21. var myOptions = {
    
22. zoom: 15,
    
23. center: latlng,
    
24. mapTypeControl: false,
    
25. navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    
26. mapTypeId: google.maps.MapTypeId.ROADMAP
    
27. };
    
28. var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
    
29. var marker = new google.maps.Marker({
    
30. position: latlng,
    
31. map: map,
    
32. title:"You are here!"
    
33. });
    
34. $.cookie("MyLat", position.coords.latitude); // Storing latitude value
    
35. $.cookie("MyLon", position.coords.longitude); // Storing longitude value
    
36. }
    
37. function error(msg)
    
38. {
    
39. var s = document.querySelector('#status');
    
40. s.innerHTML = typeof msg == 'string' ? msg : "failed";
    
41. s.className = 'Fail';
    
42. }
    
43. if (navigator.geolocation)
    
44. {
    
45. navigator.geolocation.getCurrentPosition(success, error);
    
46. }
    
47. else
    
48. {
    
49. error('Not supported'); //HTML Support
    
50. }
    
51. 
    
52. //Jquery Code
    
53. $(document).ready(function()
    
54. {
    
55. $("#check").click(function()
    
56. {
    
57. var lat = $.cookie("MyLat");
    
58. var lon = $.cookie("MyLon");
    
59. alert('Latitued: '+lat);
    
60. alert('Longitude: '+lon);
    
61. var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
    
62. alert('Google Map API: '+url);
    
63. //Get Json Request Here
    
64. });
    
65. });
    
66. </script>
    
67. //HTML Code
    
68. <input type='button' id='check' value='Check-out'/>
    
69. <div id="status">Loading.............</div>
    
70. <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.)

ที่มา

1. http://www.9lessons.info/2011/06/geo-location-with-html5-and-jquery.html

คัดลอกไปที่คลิปบอร์ด