I'm using the Google Maps AutoComplete interface to do automatic look up of locations as the user types. It works great on all browsers I tested (Chrome, FireFox, iOS and newer Android devices), except Windows Phone.
On Windows phone the places_changed event doesn't appear to be firing, nor is the text box automatically updating as it does on other browsers.
Here's a simplified scenario that demonstrates with a single textbox on a form:
<div class="container" style="padding: 40px">
<label>Enter a location</label>
<input id="location" value="" class="form-control" />
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places">
</script>
<script>
var el = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(el);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
if (place.geometry.location)
// delay setting the value - otherwise maps uses default always
setTimeout(function() { el.value = place.name; }, 200);
});
</script>
You can try this out at: http://embed.plnkr.co/kAwU0Fl97nEQr5HhxOTH/preview
It works fine in all browsers (including IE 11 which supposedly uses the same rendering engine as Windows Phone 8), but on Windows Phone the drop down box pops up, but neither the automatic update for the textbox fires, nor the explicit event code that updates the text with the name only.
Is there any way to work around this?
