Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Google Maps Latitude and Longitude

    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.

    Code:
    <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

    Code:
    <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>
    Last edited by lostprophetsie; 06-18-2009 at 12:31 AM.

  • #2
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm still searching for a solution for this so if anyone has any ideas please let me know.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    If that code works, then I can't see why you can't just do:
    Code:
    <form name="LatLngForm">
    Latitude: <input name="lat">
    Longitude: <input name="lng">
    </form>
    and then change
    Code:
          document.getElementById("lat").innerHTML = point.lat().toFixed(5);
          document.getElementById("lng").innerHTML = point.lng().toFixed(5);
    to
    Code:
          document.LatLngForm.lat.value = point.lat().toFixed(5);
          document.LatLngForm.lng.value = point.lng().toFixed(5);

  • Users who have thanked Old Pedant for this post:

    lostprophetsie (06-18-2009)

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Old Pedant,

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

    Thanks
    Tommy

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Old Pedant,

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

    Tommy.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Phew. Good.

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    If that code works, then I can't see why you can't just do:
    Code:
    <form name="LatLngForm">
    Latitude: <input name="lat">
    Longitude: <input name="lng">
    </form>
    and then change
    Code:
          document.getElementById("lat").innerHTML = point.lat().toFixed(5);
          document.getElementById("lng").innerHTML = point.lng().toFixed(5);
    to
    Code:
          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
    Code:
    document.getElementById("lat").innerHTML = point.lat().toFixed(5);
    to
    Code:
    document.LatLngForm.lat.value = point.lat().toFixed(5);
    as well as the three occurances of the
    Code:
    document.getElementById("lng").innerHTML = point.lng().toFixed(5);
    to
    Code:
    document.LatLngForm.lng.value = point.lng().toFixed(5);
    When I did that the google map disappeared.

    Thanks

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •