Avatar of llessurt
llessurt asked on

JAVAScript Function for Google Maps API

I am attempting to update form fields with lat/long and address information based on the position of a draggable marker; however, I cannot get the address information to update when the marker is moved.  It seems that the getAddress function does not execute when the marker is released.

The JAVAScript is included with this post or you can easily see the entire page with form fields in action at http://www.dwycowarehousesales.com/test.asp.  In the uploaded version, the GEvent.addListener is uncommented, which will cause the address field to be updated based on the location you click on the map.  The lat/long information updates as expected, but the address information does not update with marker release.

I'm sure you can tell that I'm not familiar with JAVAScript, so very much appreciate your help with this!
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjqvq9ft21y-9k7Gvk3kA9xTw6H2RdkhLyjN942TxVhjhl8xtORQ8VNSa8bRlowcU2DOdQvNH1DKHng"
            type="text/javascript"></script>
<script type="text/javascript">
    
  var map;
  var geocoder;
  var address;
  function initialize() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map_canvas"));
      var center = new GLatLng(40.730885,-73.997383);
      map.setCenter(center, 15);
      map.addControl(new GLargeMapControl);
      map.addControl(new GMapTypeControl());
      var marker = new GMarker(center, {draggable: true});
      //GEvent.addListener(map, "click", getAddress);
 
      GEvent.addListener(marker, "dragend", function() {
        var position = marker.getPoint();
        map.panTo(new GLatLng(position.lat(), position.lng()));
        coordinates.latlonpos.value = position.lat()+", "+position.lng();
         getAddress();//THIS DOES NOT EXECUTE
      });
      geocoder = new GClientGeocoder();
      map.addOverlay(marker);
    }
  }
 
  function getAddress(overlay, latlng) {
    if (latlng != null) {
      address = latlng;
      geocoder.getLocations(latlng, showAddress);
    }
  }
 
  function showAddress(response) {
    if (!response || response.Status.code != 200) {
      alert("Status Code:" + response.Status.code);
      coordinates.streetaddress.value = response.Status.code
    } else {
      place = response.Placemark[0];
      coordinates.streetaddress.value = place.address
    }
  }
 
</script>

Open in new window

Web Development SoftwareJavaScript

Avatar of undefined
Last Comment
llessurt

8/22/2022 - Mon
Albert Van Halen

coordinates is your form.
In order to directly access it, you have to specify it's name
Otherwise you have to create a global variable in javascript : var coordinates = document.getElementById("coordinates");

To get the address, you have to modify the "dragend" event.
You have to pass a latidude/longitude object to it
<script type="text/javascript">
  var coordinates = document.getElementById("coordinates"); // the form
  var map;
  var geocoder;
  var address;
  function initialize() {
    if (GBrowserIsCompatible()) {
      map = new GMap2(document.getElementById("map_canvas"));
      var center = new GLatLng(40.730885,-73.997383);
      map.setCenter(center, 15);
      map.addControl(new GLargeMapControl);
      map.addControl(new GMapTypeControl());
      var marker = new GMarker(center, {draggable: true});
      //GEvent.addListener(map, "click", getAddress);
 
      GEvent.addListener(marker, "dragend", function() {
          var position = marker.getPoint();
          var oLatLng = new GLatLng(position.lat(), position.lng());
          map.panTo(oLatLng);
          coordinates.latlonpos.value = position.lat()+", "+position.lng();
          getAddress(null, oLatLng);
      });
      geocoder = new GClientGeocoder();
      map.addOverlay(marker);
    }
  }
 
  function getAddress(overlay, latlng) {
    if (latlng != null) {
      address = latlng;
      geocoder.getLocations(latlng, showAddress);
    }
  }
 
  function showAddress(response) {
    if (!response || response.Status.code != 200) {
      alert("Status Code:" + response.Status.code);
      coordinates.streetaddress.value = response.Status.code
    } else {
      place = response.Placemark[0];
      coordinates.streetaddress.value = place.address
    }
  }
 
</script>
 
 
<form id="coordinates" action="test.asp">
...
</form>

Open in new window

ASKER
llessurt

The form fields seem to be referencing correctly.  (See entire page with form fields as linked in the original question.)

The oLatLng you created does recenter the map  "map.panTo"; but gives an "Object required" error when passed to "getAddress" appearantly.  I also tried deleting the overlay = null parameter altogether, but got the same result.  (The overlay parameter was probably to add a marker to the map, which I did not want so deleted already.)

The streetaddress form updates when the line "GEvent.addListener(map, "click", getAddress);" is uncommented -- what is passed to "getAddress" here?

To clarify -- the form field is updating correctly with latlonpos when the marker is moved; and the streetaddress form field updates when you click on the map (with the line mentioned above uncommented), but not when you move the marker.  I want the streetaddress to update with the latlonpos when the marker is moved.
ASKER CERTIFIED SOLUTION
Albert Van Halen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
llessurt

Awesome!!!  You are the best.  Exactly what I wanted.  Thank you for going the extra mile and providing complete, tested solution.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck