HTML geolocation

by juank on February 18th, 2012
No notes
Syntax: No syntax
Show lines - Hide lines - Show in textbox - Download
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5 geolocation iPhone</title>
  6. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  7. <style type="text/css">
  8. html,body {
  9. 	margin: 0px;
  10. 	padding: 0px;
  11. }
  12. #geomap {
  13. 	padding: 0px;
  14. 	margin: 0px;
  15. }
  16. @media all{
  17. 	#geomap { width:100%; height:100%;}
  18. }
  19. @media (max-width:980) and (min-width:768px){
  20. 	#geomap {width: 980px; height:100%}
  21. }
  22. @media (min-width: 481px) and (max-width: 768px){
  23. 	#geomap {width:768px; height:100%;
  24. }
  25. @media (min-width: 321px) and (max-width: 480px){
  26. 	#geomap {width:480px; height:100%;
  27. }
  28. @media (max-width: 320px){
  29. 	#geomap {width:320px; height:100%;
  30. }
  31. </style>
  32. <script>
  33. function googleMapIt(p){
  34. 	var map = 'http://maps.google.com/maps?&z=15&output=embed&ll='+p.coords.latitude+','+p.coords.longitude;
  35. 	document.getElementById("geoMap").src=map;
  36. }
  37. if(navigator.geolocation){
  38. 	navigator.geolocation.getCurrentPosition(googleMapIt);
  39. }else{
  40. 	alert("Your browser does not support geolocation!");
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <iframe id="geoMap" frameborder="0" scrolling="no" src=""></iframe>
  46. </body> 
  47. </html>

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS