Andyd Posted March 15 Share Posted March 15 (edited) I am starting to lose my mind and cant get my head around this. I have the following field <div class="form-group"> <label for="exampleFormControlInput1">Job Address</label> <input type="text" class="form-control maps-autocomplete" id="JobAddress" > </div> and this javascript code <script src="https://maps.googleapis.com/maps/api/js?key=[GAPI_KEY]&loading=async&libraries=places" type="text/javascript"></script> <script> function initialize() { var acInputs = document.getElementsByClassName('maps-autocomplete'); for (var i = 0; i < acInputs.length; i++) { var options = { types: ['geocode'], componentRestrictions: { country: 'uk' }, fields: ['formatted_address'], types: ['address'], }; var autocomplete = new google.maps.places.Autocomplete(acInputs[i],options); autocomplete.inputId = acInputs[i].id; } } initialize(); </script> It works bur wont fetch the postal code or county / state Can someone please help as I've tried googling but cant find anything without adding a map the the page which i don't want to do Thanks in advance Edited March 15 by Andyd Attach Image Quote Link to comment Share on other sites More sharing options...
gizmola Posted March 15 Share Posted March 15 You might consider switching to the places api. Quote Link to comment Share on other sites More sharing options...
Andyd Posted March 15 Author Share Posted March 15 16 minutes ago, gizmola said: You might consider switching to the places api. Is is the places api Quote Link to comment Share on other sites More sharing options...
gizmola Posted March 15 Share Posted March 15 You need to actually use a place object, which you get by adding a listener to the autocomplete "place_changed" event. Something more like this: // script.js let autocomplete; function initialize() { const acInputs = document.getElementById('JobAddress'); const options = { types: ['geocode'], componentRestrictions: { country: 'uk' }, fields: ['formatted_address'], types: ['address'], }; autocomplete = new google.maps.places.Autocomplete(acInputs, options); autocomplete.addListener("place_changed", fillInAddress); } function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); console.log(place.formatted_address); return; } initialize(); Also your script should load after the body, and use defer. <body> <form> <div class="form-group"> <label for="exampleFormControlInput1">Job Address</label> <input type="text" class="form-control maps-autocomplete" id="JobAddress"> </div> </form> <script type="text/javascript" src="script.js" defer></script> </body> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.