Avatar of srbarker8
srbarker8
Flag for Canada

asked on 

Help with Google mapping API -> how to get lat & long after dragging a marker

Hi there,

I'm putting a small util on our website that uses the Google Mapping API.  It shows a map of an address.
It's pretty basic code from the Google docs.  The mapping part I've got working correctly.

However, I turned on the draggable property of the marker that I created and added the event listener function and it says" Now what?" ..  if the user drags the marker to somewhere else.

What I need help with is how to get the new lat and long co-ordinates in the dragend event?

I don't know how to set up passed parameters on the dragend event or whatever else it would take to access that info?

Essentially, what I am trying to do is ...obtain the new lat and long co-ords in the dragend event and place them in my two form fields ...

document.mapform.txtLat_Value.value

and

document.mapform.txtLong_Value.value

..then they will be posted back to my web-server.

Pls help.

Thx Scott


My body tag says ... <body onload="javascript:initialize();showlocamap();">   .. and this gets the ball rolling and correct maps 123 Main St for me...
 
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=<%=gcGoogleAPIKey%>" type="text/javascript"></script>
<script type="text/javascript">
 
    var map;
    var geocoder;
 
    function initialize() {
 
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(34, 0), 1);
      geocoder = new GClientGeocoder();
    }
 
    
    function showlocamap() {
      geocoder.getLocations('123 Main St, Portland, OR', AddressToMap);    
    }
 
    function AddressToMap(response) {
				
	 map.setCenter(new GLatLng(34, 0 ), 5);
	 var mapControl = new GMapTypeControl();
	 map.addControl(mapControl);
	 map.addControl(new GLargeMapControl());	
			    
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);   
                            
		Clip_Lat = place.Point.coordinates[1];   
		Clip_Long = place.Point.coordinates[0];	
		
		document.mapform.txtLat_Value.value = Clip_Lat;
		document.mapform.txtLong_Value.value = Clip_Long;
        
        marker = new GMarker(point,{draggable:true});
 
        GEvent.addListener(marker, 'dragend', function() {marker.openInfoWindow('Now What?';});
        
        map.addOverlay(marker);
        marker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
          
      }
    }
 
</script>

Open in new window

JavaScriptAJAX

Avatar of undefined
Last Comment
b0lsc0tt

8/22/2022 - Mon