Assemble Google Map location based on address fields

• 

  • dtx211

  • February 9, 2017 at 8:50 am

  I have a front-end form where, among other things, the user can enter their address.

  Currently, I have fields for street, house number, zip code, city, and a Google Map field.

  I would like to give the user the option of not having to repeat himself, i.e. not having to enter his address a second time to pinpoint his location on the map.

  Instead, I’m working on a function to feed the data from the address fields to the map. The ideal situation would be for the map to search for address options so the user would only have to click on the correct one (as is the case while entering information into the map).

  The function I wrote is as follows:

  
      var street = "",
          house  = "",
          zip    = "",
          city   = "";
  
      $('#form-street').focusout(function() {
        street = $('#form-street input')[0].value;
        $('#form-map input')[0].value = street + " " + house + " " + zip + " " + city;
      });
  
      $('#form-city').focusout(function() {
        city = $('#form-city input')[0].value;
        $('#form-map input')[0].value = street + " " + house + " " + zip + " " + city;
      });
  

  This actually works, it just has two problems:

  • the map address is not updated when the form field loses focus but when I click on the map address input itself and then let it lose focus.
  • Then, the searching and offering different options part only happens after I click the map address field again.

  Does anyone have experience with this?
• 

  

  • John Huebner

  • February 19, 2017 at 3:54 am

  I have some examples of adding custom JS to update fields based on other fields, but not anything for your exact needs. Getting the value from a text field should be fairly easy.

  When targeting fields you need to use something like

  
  $('[data-key="field_0123456789"] input')
  

  for a text field, field names are not used in the input fields when editing, only the keys. The name of the field is in a data attribute, but it’s always easier to use field keys.

  Updating the google maps field, I have not done this yet. I would start by figuring out what field in the map field needs to be updated and then I’d look for the action to trigger the map field to do it’s thing. This could be as simple as triggering a change event on the input field where you insert the value.