google api reverse geocode

Question

I Have a google map on my site. Users can drag the marker and the map will input the lat and lon into a form for me. See code below. I want to be able to get the address from the lat and lon and put it into my form at "locationbox".

    <script src="multi_step_form.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
    <script type="text/javascript">
  var map;
  function initialize() {
  var myLatlng = new google.maps.LatLng(49.25302534866034,-102.04825518471148);
  var myOptions = {
     zoom: 3,
     center: myLatlng,
     mapTypeId: google.maps.MapTypeId.HYBRID
     }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
  var marker = new google.maps.Marker({
  draggable: true,
  position: myLatlng, 
  map: map,
  title: "Your location"
  });
    google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
    });
  }
</script> 

I have another bit of code to look up the address that I got from https://203luv.wordpress.com/2011/10/21/google-maps-javascript-v3-api-how-to-get-address-from-coordinates-latitude-longitude/ but I just can't figure out how to blend them together.

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var geocoder = new google.maps.Geocoder();

var lat = "12.1234";

var long = "98.7654";

var latlng = new google.maps.LatLng(sLat, sLong);

geocoder.geocode({"latLng":latlng},function(data,status){

if(status == google.maps.GeocoderStatus.OK){

var add = data[1].formatted_address; //this is the full address

alert(add);

for(var i=0; i<data[1].address_components.length; i++){

if(results[1].address_components[i].types[0] == "administrative_area_level_1"){

alert(results[1].address_components[i].short_name); 

}

}

}

})

My html form looks like this

      <div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"></div>
  <div id="latlong">
    <p><input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude"></p>
    <p><input size="20" type="text" id="lngbox" name="lon"  placeholder="Drag the marker on the map  or type in the longitude"></p>
  </div>
<input class="text_field" id="locationbox" name="location" placeholder="Location" type="text" >

Any help would be appreciated

Answer 1

I would suggest calling the reverse geocoder in the dragend event listener function:

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
    var latlng = this.getPosition();
    geocoder.geocode({
        "latLng": latlng
    }, function (data, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var add = data[1].formatted_address; //this is the full address
            // alert(add);
            for (var i = 0; i < data[1].address_components.length; i++) {
                if (data[1].address_components[i].types[0] == "administrative_area_level_1") {
                    document.getElementById('locationbox').value = data[1].address_components[i].short_name;
                }
            }
        }
    });
});

proof of concept fiddle

code snippet:

var map;

function initialize() {
  var geocoder = new google.maps.Geocoder();
  var myLatlng = new google.maps.LatLng(49.25302534866034, -102.04825518471148);
  var myOptions = {
    zoom: 3,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
    draggable: true,
    position: myLatlng,
    map: map,
    title: "Your location"
  });
  google.maps.event.addListener(marker, 'dragend', function(event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();

    var latlng = this.getPosition();

    geocoder.geocode({
      "latLng": latlng
    }, function(data, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        var add = data[1].formatted_address; //this is the full address

        // alert(add);

        for (var i = 0; i < data[1].address_components.length; i++) {

          if (data[1].address_components[i].types[0] == "administrative_area_level_1") {

            document.getElementById('locationbox').value = data[1].address_components[i].short_name;

          }
        }
      }
    });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"></div>
<div id="latlong">
  <p>
    <input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude">
  </p>
  <p>
    <input size="20" type="text" id="lngbox" name="lon" placeholder="Drag the marker on the map  or type in the longitude">
  </p>
</div>
<input class="text_field" id="locationbox" name="location" placeholder="Location" type="text">