CODEWITHSUNDEEP
phpjavascripthtmlgoogle-maps-api-3google-geocoding-api
Brian O keeffe
Brian O keeffe

Reputation: 15

Passing Googlemap latitude and longitude as javascript to HTML form

Hi I am currently using GoogleMaps API v3 and I am trying to get the variables for the latitude and longitude and place them in a hidden form as html variables and pass them through a form to a php page. The latitude and longitude are printing out on my page as the span but I cant get them to print in the form.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>

   <!-- google maps -->
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">        </script>

    <!-- jquery -->
   <script type="text/javascript" src="js/jquery.min.js"></script>

   <!-- jquery UI -->
   <script type="text/javascript" src="js/jquery-ui.min.js"></script>

   <!-- our javascript -->
   <script type="text/javascript" src="gmaps.js"></script>

   <link rel="stylesheet" type="text/css" href="style4.css" />


   </head>

   <body>

      <input id='gmaps-input-address' type='text'/>

    <div id='gmaps-error'></div>

    <div id='gmaps-canvas'></div>

      <br/>
      <br/>
    Latitude: <span id='gmaps-output-latitude'></span>
      <br/>
      Longitude: <span id='gmaps-output-longitude'></span>
      <br/>     

    <script type="text/javascript">

    function doSomething()
    {
    var lat = document.getElementById('#gmaps-output-latitude');
    lat_element.value = google_maps_api_variable;
    var lon = document.getElementById('#gmaps-output-longitude');
    lon_element.value = google_maps_api_variable;
    document.getElementById("lat").value=lat;
    document.getElementById("lon").value=lon;
    }
    </script>


   <form action="join.php" method="post" onSubmit="doSomething">

   <input type="hidden" name="lat" id="lat"/>
   <input type="hidden" name="lon" id="lon"/>

   <input type="submit" value="Confirm Address"/>
   </form>
   </body>


   </html>

In the Googlemaps API there is a javascript function which holds the latitude and longitude as follows:

function update_ui( address, latLng ) {
 $('#gmaps-input-address').autocomplete("close");
 $('#gmaps-input-address').val(address);
 $('#gmaps-output-latitude').html(latLng.lat());
 $('#gmaps-output-longitude').html(latLng.lng());
 }

I am very green with Javascript and would really appreciate any help, I have searched other questions to get as far as I am but I am stuck here.

Upvotes: 1

Views: 2615

Answers (2)

Rooster
Rooster

Reputation: 10077

just add this after the code you already have(to work before the form submits as a click handler of the form submittal buon or something):

$('#lat').val($('#gmaps-output-latitude').html());
$('#lon').val($('#gmaps-output-longitude').html());

Upvotes: 1

sushil bharwani
sushil bharwani

Reputation: 30187

gmaps.js is your js which populates span in your html file. This should be happening through a callback function which i probably think is update_ui. This function might be populating the spans afterwards and your script for populating hidden fields might have already executed. So places the code for populating hidden fields after the callback function call or may be in update_ui itself.

so edit your update_ui function and add 

$('#lat').val(latLng.lat());
$('#lon').val(latLng.lng());

these lines in the function body in end.

Upvotes: 0

Related Questions