Change value of Google Maps Autocomplete field
How do I change the value of a Google Maps autocomplete field after the value has been changed?
My ultimate desire is to just show the address in this field, and the city, state, etc in separate fields.
As seen by http://jsbin.com/wiye/2/ (script duplicated below), I change the value, but it later changes back.
show just the street address in google.maps.event.addListener() asks the same question, but it no longer appears to work. Change the value in textbox of a google map autocomplete also asks the same question, but doesn't have an adequate answer.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Places search box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
$(function(){
var input_auto = document.getElementById('input_auto');
autocomplete = new google.maps.places.Autocomplete(input_auto,{types: ['geocode'],radius: 10});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
setTimeout(function(){$('#input_auto').val('yyy');},50);
alert('pause1');
console.log(autocomplete,input_auto);
input_auto.value='xxx';
//autocomplete.set('xxx');
//autocomplete.setValues('xxx');
alert('pause2');
});
});
</script>
</head>
<body>
<input id="input_auto" type="text">
</body>
</html>
Answer
The simplest way I've found to programmatically change the value of an Autocomplete input is to reinitialize the input field.
var input = document.getElementById(input_auto);
autocomplete = new google.maps.places.Autocomplete(input, option);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
// perform any functions based on place input
...
// change the value of your autocomplete to whatever you want
input.value = 'yyy';
// reinitialize with new input value
autocomplete = new google.maps.places.Autocomplete(input, option);
}