How to pass form information onto a google map on a separate page?

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.

Please tell me this doesn't require some server-side code. I should think this would be a simple thing. — temporary_user_name, Mar 18 '12 at 23:49
This should be done on the server side, not with javascript. I would retag this to php or whatever your server side language is. — Fresheyeball, Mar 18 '12 at 23:49
When the user submits the coordinates, they are taken to 'map.html'-- does that count? — temporary_user_name, Mar 18 '12 at 23:51
ultimately, you need a way to pass the params between the pages, that means in the url like this `map.html?lat=foo&lon=bar` or a cookie. I am not familiar with phonegap. — Fresheyeball, Mar 18 '12 at 23:55

score 3 · Accepted Answer · edited May 23 '17 at 10:34

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.

How to pass form information onto a google map on a separate page?

1 Answers1

Linked