
Use the below snippet to have an Auto-Complete Address input powered by google for your 2-step-order form
It will fill in all the address fields separately: City, State and Postal Code
NOTE*:
You will need a Google Places API key.
Please Make Sure to Enable the Google Maps API as well as the Google Places API
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> <script> var input = document.querySelector('input[name="address"]'); var options = { types: ['address'] }; var componentForm = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'short_name', postal_code: 'short_name' }; autocomplete = new google.maps.places.Autocomplete(input, options); autocomplete.setFields(['address_component']); autocomplete.addListener('place_changed', fillInAddress); function fillInAddress() { var place = autocomplete.getPlace(); console.log(place) var street; var address = document.querySelector('input[name="address"]') var city = document.querySelector('input[name="city"]'); var state = document.querySelector('input[name="state"]') var postalCode = document.querySelector('input[name="zipcode"]') var country = document.querySelector('select[name="country"]') place.address_components.forEach(addressComp => { var addressType = addressComp.types[0]; var val = addressComp[componentForm[addressType]]; if (addressType == "street_number") { console.log(val) street = val; } else if (addressType == "route"){ console.log(val) street += " " + val; } else if(addressType == "locality") { console.log(val) city.value = val } else if(addressType == "administrative_area_level_1") { console.log(val) state.value = val } else if(addressType == "postal_code") { console.log(val) postalCode.value = val } else if(addressType == "country") { console.log(val) country.value = val } }); address.value = street var e = document.createEvent('HTMLEvents'); e.initEvent('input', true, true); address.dispatchEvent(e); city.dispatchEvent(e); state.dispatchEvent(e); postalCode.dispatchEvent(e); var sl = document.createEvent('HTMLEvents'); sl.initEvent('change', true, true); country.dispatchEvent(sl); setTimeout(function () { console.log(document.querySelector(".pac-container")) document.querySelector(".pac-container").style.display = "none" console.log(document.querySelector(".pac-container")) },1000) } </script>