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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Birmingham, UK
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Inserting Google maps coordinates into text field after marker location updated

    Hi guys,

    Hopefully a really quick question. I'm a JS novice, and am looking for a way to output the coordinates of a Google maps marker into the value of two text fields, one for latitude and one for longitude.

    The code below is a simple location search which returns a result with a draggable marker. Currently, the coordinates in both text fields update when the location search is performed, but not when the marker is dragged to a new location afterwards.

    Does anyone know the code to simply update the coordinates each time the marker is dropped on a new location?

    Code:
    <html>
    <head>
    <style type="text/css">
    #map_canvas {
    width:444px;
    height:444px;
    overflow:hidden;
    }
    </style>
          <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA-Kl-tQOj5PlnOlXQmp2N9hTg6Fn61x9hOlvMvn6kV4ENK8yRfBShRuj-nulocuk2Alx9JmFKKV4zwA" 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(52.8068752, -1.6430344),6);
    			map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
    		map.enableScrollWheelZoom();
          geocoder = new GClientGeocoder();
    	    // Update current position info
        }
     
        // addAddressToMap() is called when the geocoder returns an
        // answer.  It adds a marker to the map with an open info window
        // showing the nicely formatted version of the address and the country code.
        function addAddressToMap(response) {
          map.clearOverlays();
          if (!response || response.Status.code != 200) {
            alert("Whoops, we couldn't find that address!");
          } else {
            place = response.Placemark[0];
            point = new GLatLng(place.Point.coordinates[1],
                                place.Point.coordinates[0]);
            marker = new GMarker(point,{draggable:true});
            map.addOverlay(marker);
    		
    
    
    
    		
    		
            marker.openInfoWindowHtml(place.address + '<br /><span class="smallgrey">Zoom in and drag the marker to exactly where the point is</span>');
          
    		document.getElementById("latitude").value = point.lat();
    		document.getElementById("longitude").value = point.lng();
    
    
    
    }
    	  
        }
     
        // showLocation() is called when you click on the Search button
        // in the form.  It geocodes the address entered into the form
        // and adds a marker to the map at that location.
        function showLocation() {
          var address = document.forms[0].q.value;
          geocoder.getLocations(address, addAddressToMap);
        }
     
       // findLocation() is used to enter the sample addresses into the form.
        function findLocation(address) {
          document.forms[0].q.value = address;
          showLocation();
        }
    	
    
    
    
        </script>
    </head>
    
      <body onload="initialize()"> 
    
    
    <form action="#" onsubmit="showLocation(); return false;"><input type="text" name="q"  size="35" /> <input type="submit" name="find" value="Search"/></form> 
    <div id="map_canvas">And pin the <strike>tail</strike> marker on the <strike>donkey</strike> map:<br /></div> 
    
    Latitude: <input class="required" type="text" name="latitude" id="latitude" value="53.34870686020199" /> <br />
    Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-6.267356872558594" />
    
    
    </body>
    </html>
    Many thanks in advance, I appreciate anyone who wants to help out!

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,022
    Thanks
    56
    Thanked 566 Times in 563 Posts
    you mean like this?

    or this?
    Last edited by xelawho; 02-05-2011 at 05:51 AM.

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Birmingham, UK
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply, sorted!


  •  

    Tags for this Thread

    Posting Permissions

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