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

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

llessurt

ASKER

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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

llessurt

ASKER

Awesome!!! You are the best. Exactly what I wanted. Thank you for going the extra mile and providing complete, tested solution.