title: google api reverse geocode
body: <p>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". </p>
  
  <pre><code>    &lt;script src="multi_step_form.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
    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();
      });
    }
  &lt;/script&gt; 
  </code></pre>
  
  <p>I have another bit of code to look up the address that I got from <a href="https://203luv.wordpress.com/2011/10/21/google-maps-javascript-v3-api-how-to-get-address-from-coordinates-latitude-longitude/" rel="nofollow">https://203luv.wordpress.com/2011/10/21/google-maps-javascript-v3-api-how-to-get-address-from-coordinates-latitude-longitude/</a> but I just can't figure out how to blend them together. </p>
  
  <pre><code>    &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  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&lt;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); 
  
  }
  
  }
  
  }
  
  })
  </code></pre>
  
  <p>My html form looks like this</p>
  
  <pre><code>      &lt;div id="map_canvas" style="width: 450px; height: 450px; background-color: Black;"&gt;&lt;/div&gt;
    &lt;div id="latlong"&gt;
      &lt;p&gt;&lt;input size="20" type="text" id="latbox" name="lat" placeholder="Drag the marker on the map or type in the latitude"&gt;&lt;/p&gt;
      &lt;p&gt;&lt;input size="20" type="text" id="lngbox" name="lon"  placeholder="Drag the marker on the map  or type in the longitude"&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;input class="text_field" id="locationbox" name="location" placeholder="Location" type="text" &gt;
  </code></pre>
  
  <p>Any help would be appreciated </p>