Question

I have two forms, latitude and longitude, i.e.:

<form action="">
Latitude <input type="text" name="latitude" /><br />
Longitude: <input type="text" name="longitude" /><br />
<input type="submit" value="Continue">
</form>

When I click submit, I want to be taken to a new page on which is drawn a google map with a marker centered at the input coordinates.

I know how to draw the map, I’m just not sure how to transfer the coordinates from one HTML page to the next one. Can someone show a quick example? I’m assuming there’s supposed to be an action=something and/or method=something for the form, but I’ve never done it before.

This is part of a phonegap webapp. I am not sure whether it is possible to use cookies in that context.

Answer 1

Define your <form> method as GET, like so:

<form action="map.html" method="GET">

When you submit the form your URL should look something like the following, being X the latitude and longitude values written on the form.

http://www.example.com/map.html?latitute=X&longitue=X

Then, on map.html write a piece of JavaScript that extracts the latitude and longitude
information from the URL.

The following example was written by Artem Barger and was taken from How can I get query string values in JavaScript?

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

Finally, if you use this function, you might do something like:

var latitude = getParameterByName("latitude");
var longitude = getParameterByName("latitude");
//Pass latitude and longitude vars to Google Maps API.