Jump to content

Recommended Posts

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

screenshot_google.png

Edited by Andyd
Attach Image
Link to comment
https://forums.phpfreaks.com/topic/319136-google-maps-autocomplete-address-lookup/
Share on other sites

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>

 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.