Ok, i know this is simple but I am more of a php dude, I have a form on the page that i would like to fill with the longitude and latitude of the user using HTML5 I know its possible i have seen it on tons of other scripts but just dont know how to pass the variables to the page, here is what i have: <script type="text/javascript"> // First check if browser supports the geolocation API if (navigator.geolocation) { // Get the current position navigator.geolocation.getCurrentPosition(function(position) { lat = position.coords.latitude long = position.coords.longitude; document.getElementById("long").value = 'test'+long; document.getElementById("lat").value = lat; }); } else { alert("Sorry... your browser does not support the HTML5 GeoLocation API"); } </script> the lines i marked with is where i try and pass the values to the form feilds but nothing is passing, it is asking me for permission to give location but then nothing
Yeah I tried using the google API but I could not get it to send the values to the form either, It is really the sending the values to the form part that seems to be stumping me.
How exactly are you sending it to a form? You could just straight out do an AJAX XmlHttpRequest POST with lat/long instead of using .value
That is what I am trying to do, to get the values of geolocation into a form so i can save it, the idea being this: the user goes to this page to save the longitude and latitude co-ordinates of their current location, so they click "add location" then this page loads, it has to get their co-ordinates and pass it to the form i have on the page where it allows them to name the location (ie, my house, work, school) so that in the end i have the long, lat, and name in a form so i can save it to mysql database, i have the save and all that worked out, i just need the form to have the values of the users longitude and latitude.
<!doctype html> <html lang="en"> <head> <title>Page!</title> <script type="text/javascript" src="http://www.google.com/jsapi?key=[b]!!!!REPLACE-THIS-WITH-YOUR-GOOGLE-AJAX-APIS-KEY!!!!![/b]"></script> </head> <body> <input id="lat"> <br><br><input id="lon"> <input type="submit"> <script type="text/javascript"> google.setOnLoadCallback(function() { if (google.loader.ClientLocation && google.loader.ClientLocation.latitude && google.loader.ClientLocation.longitude) { document.getElementById('lat').value = google.loader.ClientLocation.latitude; document.getElementById('lon').value = google.loader.ClientLocation.longitude; } }); </script> </body> </html> HTML:
While i thank you so much for the effort you extended to help me, that google clientlocation is based on the IP number and is extremely inaccurate when it even gets results, I did however find the solution last night so incase anyone ever has this issue here is what i ended up with as the most boiled down it can be: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function initGeolocation() { if( navigator.geolocation ) { // Call getCurrentPosition with success and failure callbacks navigator.geolocation.getCurrentPosition( success, fail ); } else { alert("Sorry, your browser does not support geolocation services."); } } function success(position) { document.getElementById('long').value = position.coords.longitude; document.getElementById('lat').value = position.coords.latitude } function fail() { // Could not obtain location } </script> </head> <body onLoad="initGeolocation();"> <FORM NAME="rd" METHOD="POST" ACTION="index.html"> <INPUT TYPE="text" NAME="long" ID="long" VALUE=""> <INPUT TYPE="text" NAME="lat" ID="lat" VALUE=""> </body> </html> Code (markup):
works in safari and google chrome and on both Iphone and andriod phones which is what i cared about, html5 is going to be supported by any major browser from now on, so the only major browser that doesnt work on is (suprise suprise) Internet Explorer. i even tested this on my daughters linux box and worked on all. i will say this as a note, Firefox and safari bot have a bit of a hickup when refreshing the page, it has to do with session issue, so it can only be done once on a session with out any delays.