title: How to display latitude longitude of google maps api marker in html text box
body: <p>I have added a google map to my site that has a draggable marker. However I would like to display the latitude and longitude of the marker location in a text box below the google map as in this example:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;script src="http://maps.google.com/maps?         file=api&amp;amp;v=2&amp;amp;key=examplekey"
                        type="text/javascript"&gt;
          &lt;/script&gt;   
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;/h2&gt;&lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div id="map" style="WIDTH: 700px; HEIGHT: 500px"&gt;&lt;div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
  &lt;form action="http://formtoemailremote.com/user_forms.php" method="post"&gt;
  Lat/Long:..........&lt;input type="text" name="grid" id="grid"&gt;&lt;br&gt;
  &lt;/form&gt;
  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;p&gt;
  &lt;/p&gt;
  &lt;script type="text/javascript"&gt; 
  
  var map
  map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  //map.centerAndZoom(new GPoint(-2.3, 49.35), 8);
  map.setCenter(new GLatLng(49.461,-2.58),12);
  map.enableDoubleClickZoom();
  
  var icon = new GIcon();
  var point=new GLatLng(49.461,-2.58);
  var marker = new GMarker(point, {icon:G_DEFAULT_ICON, draggable: true}); 
  map.addOverlay(marker);
  marker.enableDragging();
  GEvent.addListener(marker, "drag", function(){
  document.getElementById("grid").value=marker.getPoint().toUrlValue();});
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I see that the connection between the marker and the text box is the id value</p>
  
  <pre><code>GEvent.addListener(marker, "drag", function(){
  document.getElementById("grid").value=marker.getPoint().toUrlValue();});
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;form action="http://formtoemailremote.com/user_forms.php" method="post"&gt;
  Lat/Long:..........&lt;input type="text" name="grid" id="grid"&gt;&lt;br&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>but when I copy this in to my own code it doesn't work:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;!--LOADING THE GOOGLE MAP APPLICATON PROGRAMMING INTERFACE--&gt; 
  &lt;script src="http://maps.googleapis.com/maps/api/js?key=insertkey&amp;sensor=false"&gt;
  &lt;/script&gt;
  
  &lt;script&gt;
  // DEFINING NEW VARIABLE "MYCENTER"
  var myCenter=new google.maps.LatLng(49.716,-2.196);
  
  function initialize()
  {
  // DEFINING MAP PROPERTIES NOTICE CENTER USES PREDEFINED "MYCENTER"
  var mapProp = {
  center:myCenter,
  zoom:13,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };
  
  //DEFINING NEW VARIABLE "MAP," A GOOGLE MAP BASED ON "MAPPROP"
  var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
  
  // DEFINING NEW VARIABLE "MARKER" A DRAGGABLE MARKER POSITIONED AT "MYCENTER" 
  var marker=new google.maps.Marker({
  position:myCenter,
  draggable:true,
  });
  
  // PLACES THE MARKER ON THE GOOGLE MAP
  marker.setMap(map);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  google.maps.event.addListener(marker, "drag", function(){
  document.getElementById("grid").value=marker.getPoint().toUrlValue();});
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="googleMap" style="width:500px;height:380px;"&gt;&lt;/div&gt;
  
  &lt;form&gt;
  Lat/Long:&lt;input type= "text" name = "gridbox" id = "grid"&gt;&lt;br&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I notice the event code is "GEvent" in the example and "google.maps.event" in my own, which makes me think they are from two different versions of google maps api...</p>
  
  <p>I would appreciate it if someone could show me the correct coding or point me in the right direction. </p>
  
  <p>Note : I have deleted the API keys from the example and my own code. You'll have to insert your own to see what it looks like. </p>
  
  <p>Thanks for reading! </p>