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
    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. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,490
    Thanks
    57
    Thanked 635 Times in 630 Posts
    you mean like this?

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

  3. #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!

  4. #4
    New to the CF scene
    Join Date
    Oct 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I like the above code. It really worked for me. But will it be possible for the google map to automatically dictate my location, then by a click of a button, the exact location name will be displayed on a text field. This time not the code but the name. I will appreciate a complete code like the one above. Thanks.

  5. #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,490
    Thanks
    57
    Thanked 635 Times in 630 Posts
    I guess you would want to take the result returned here and feed it to a function like this

    although browser-based geolocation is somewhat unreliable - it would be advisable to have an ip address lookup or something similar as backup.

    if the above codes aren't complete enough for you, you could maybe ask here, or at least start your own thread

  6. #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,490
    Thanks
    57
    Thanked 635 Times in 630 Posts
    I've posted to this thread twice but my posts remain in moderation. What gives, mods?

  7. #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,008
    Thanks
    6
    Thanked 1,180 Times in 1,151 Posts
    Quote Originally Posted by xelawho View Post
    I've posted to this thread twice but my posts remain in moderation. What gives, mods?
    Sorry, the spam filter is taking its job too seriously sometimes.

  8. #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,490
    Thanks
    57
    Thanked 635 Times in 630 Posts
    Thanks, VIPStephan. Preferable to four pages of ads for Benghali call girls, anyway...


 

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
  •