Resolved Google Maps Latitude and Longitude

[lostprophetsie]

Hi I'm currently using some code that takes the latitude and longitude from a Google map and outputs it in a table when the user drags a marker on the map. I previously had it working that the outputted latitude and longitude appeared in an input box but I can no longer get this to work again.

Any help is greatly appreciated. I have posted the Javascript code below.

<script type="text/javascript">
 
 function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(55.54555, -3.39634 );
        map.setCenter(center, 15);
        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true}); 
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
 
      GEvent.addListener(marker, "dragend", function() {
       var point = marker.getPoint();
          map.panTo(point);
       document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);
 
        });
 
 
     GEvent.addListener(map, "moveend", function() {
          map.clearOverlays();
    var center = map.getCenter();
          var marker = new GMarker(center, {draggable: true});
          map.addOverlay(marker);
          document.getElementById("lat").innerHTML = center.lat().toFixed(5);
       document.getElementById("lng").innerHTML = center.lng().toFixed(5);
 
 
     GEvent.addListener(marker, "dragend", function() {
      var point =marker.getPoint();
         map.panTo(point);
      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
         document.getElementById("lng").innerHTML = point.lng().toFixed(5);
 
        });
 
        });
 
      }
    }
 
       function showAddress(address) {
       var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
          document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);
         map.clearOverlays()
            map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true}); 
         map.addOverlay(marker);
 
        GEvent.addListener(marker, "dragend", function() {
      var pt = marker.getPoint();
         map.panTo(pt);
      document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
         document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });
 
 
     GEvent.addListener(map, "moveend", function() {
          map.clearOverlays();
    var center = map.getCenter();
          var marker = new GMarker(center, {draggable: true});
          map.addOverlay(marker);
          document.getElementById("lat").innerHTML = center.lat().toFixed(5);
       document.getElementById("lng").innerHTML = center.lng().toFixed(5);
 
     GEvent.addListener(marker, "dragend", function() {
     var pt = marker.getPoint();
        map.panTo(pt);
    document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
       document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
        });
 
        });
 
            }
          }
        );
      }
    }
    </script>

This is the table I output the latitude and longitude to

<table class="latlontable" style="float:left">
  <tr>
    <td width="100"><b>Latitude</b></td>
    <td id="lat" name="lat"></td>
  </tr>
  <tr>
    <td width="100"><b>Longitude</b></td>
    <td id="lng" name="lng"></td>
  </tr>
</table>

[lostprophetsie]

I'm still searching for a solution for this so if anyone has any ideas please let me know.

[Old Pedant]

If that code works, then I can't see why you can't just do:

<form name="LatLngForm">
Latitude: <input name="lat">
Longitude: <input name="lng">
</form>

and then change

      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
      document.getElementById("lng").innerHTML = point.lng().toFixed(5);

to

      document.LatLngForm.lat.value = point.lat().toFixed(5);
      document.LatLngForm.lng.value = point.lng().toFixed(5);

[lostprophetsie]

Hi Old Pedant,

I tried implementing your solution, changing my javascript but the values are not appearing in the input boxes?

Thanks
Tommy

[lostprophetsie]

Hi Old Pedant,

Just had another look and your code was perfect thank you so much for the help.

Tommy.

[Old Pedant]

Phew. Good.

[shaggy]

Originally Posted by Old Pedant

If that code works, then I can't see why you can't just do:

<form name="LatLngForm">
Latitude: <input name="lat">
Longitude: <input name="lng">
</form>

and then change

      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
      document.getElementById("lng").innerHTML = point.lng().toFixed(5);

to

      document.LatLngForm.lat.value = point.lat().toFixed(5);
      document.LatLngForm.lng.value = point.lng().toFixed(5);

I am having the same problem (Cannot get the form inputs to accept the lat and lng.

Did you change all three occurrances of

document.getElementById("lat").innerHTML = point.lat().toFixed(5);

to

document.LatLngForm.lat.value = point.lat().toFixed(5);

as well as the three occurances of the

document.getElementById("lng").innerHTML = point.lng().toFixed(5);

to

document.LatLngForm.lng.value = point.lng().toFixed(5);

When I did that the google map disappeared.

Thanks

[shaggy]

Never mind... I figured it out. All the references to .innerHTML needed to be replaced by the corresponding version of document.LatLngForm.lat.value or document.LatLngForm.lng.value. Once this was done everything works great. Thanks.