Update Map When Address Fields are Changed?

[Adam-78]

Is there a way to update the map if the form fields are changed i.e. a user searches for an address (e.g. 1 Green Street) and selects it, the code below will pre-fill the form fields using the returned results. If the user then updates any of the fields I want to retrigger the widget so that the map gets updated so for example they change the City or Street Number in this case there is no binding to typeahead so map doesn't get updated.?

`<div class="col-sm-8">
<input id="location" type="text" value="" name="location" >

   <input id="address1" type="text" value="" name="address1" >
   <input id="address2" type="text" value="" name="address2" >
   <input id="city" type="text" value="" name="city" >
    <input id="state" type="text" value="" name="state" >
   <input id="postcode" type="text" value="" name="postcode" >
</div>
<div class="col-sm-4 hidden-xs">
     <div id="map"></div>
 </div>`




` $( function() {      
   // instantiate the addressPicker suggestion engine (based on bloodhound)
    var addressPicker = new AddressPicker({
      map: {id: '#map'}, 
      marker: {draggable: true, visible: true}, 
      zoomForLocation: 18, reverseGeocoding: true
  });

  // instantiate the typeahead UI
  $('#location').typeahead(null, {
       displayKey: 'description',
       source: addressPicker.ttAdapter()
  });

   addressPicker.bindDefaultTypeaheadEvent($('#location'))

   $(addressPicker).on('addresspicker:selected', function (event, result) {

      $('#address1').val(result.nameForType('street_number') || '' + ' ' + result.nameForType('route'));
      $('#address2').val(result.nameForType('locality') || '');
      $('#city').val(result.nameForType('postal_town'));
      $('#state').val(result.nameForType('administrative_area_level_1') || '');
      $('#postcode').val(result.nameForType('postal_code') || '');     

});`