Home/ Questions/Q 8716591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T06:07:05+00:00

I want to populate 2 input fields with the long and lat based on

  • 0

I want to populate 2 input fields with the long and lat based on a location search. I have tried many different ways of adding the listener but cannot get it to work. Looking for some help.

First my Javascript and head of doc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?&sensor=true">
    </script>
<script type="text/javascript">

var geocoder;
var map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
 }

function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            google.maps.event.addListener(marker, 'dragend', function (event) {
                document.getElementById("latbox").value = this.getPosition().lat();
                document.getElementById("lngbox").value = this.getPosition().lng();
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

</script>

and then my body html under this is as follows

<body onload="initialize()" onunload="GUnload()">
  <p>
    Enter an address, The latitude/longitude will appear in the text fields after each search.
  </p>
  <p>
    <input id="address" type="textbox" value="New York, New York">
    <input type="button" value="Get Long and Lat" onclick="codeAddress()">
  </p>

  <div id="latlong">
      <p>Latitude: <input size="20" type="text" id="latbox" name="lat" ></p>
      <p>Longitude: <input size="20" type="text" id="lngbox" name="lng" ></p>
    </div>

  <div id="map_canvas" style="width: 600px; height: 400px"></div>

 </body>
</html>

The part I am having the problem with is this bit of the code 

google.maps.event.addListener(marker, 'dragend', function (event) {
            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();
        });

It is not populating my input fields with anything after I do a search.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The code in the dragend listener will only run if the marker is dragged. If you want those fields updated when the geocoder returns a value, you need to add code to do that:

     function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
        document.getElementById("latbox").value = marker.getPosition().lat();
        document.getElementById("lngbox").value = marker.getPosition().lng();

        google.maps.event.addListener(marker, 'dragend', function (event) {
            document.getElementById("latbox").value = this.getPosition().lat();
            document.getElementById("lngbox").value = this.getPosition().lng();
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
    • 0