Google Maps JavaScript API v3 - Autocomplete fields on webpage viewed on iPhone do not store a value, returns no places

I'm building a web page which has two text fields and a Google Map. A user enters a start location in the first box and a destination in the second box, then they get some info back from Google about the distance, etc.

The text boxes are hooked up for Autocomplete for Places, so as you start typing a list of suggestions should appear.

The problem I'm having is that on iPhones the text boxes are not holding a value. As soon as I move focus away from the field I am editing, (e.g. tap the next text box,) the text I have entered goes away. Also, no autocomplete results are appearing, so the user can't pick one to then trigger a place_changed event and carry on getting the distance, etc.

Example link showing the problem: http://ift.tt/12aViVX

Testing:

• Works fine on desktop browsers, (tried FF, Chrome and Safari on OSX so far.)


• Works fine on my Nexus 7 tablet using Chrome.
  
  
  
  • Didn't try other browsers. Didn't try an Android phone.
  
  
  
  


• Works fine using Safari in iOS Simulator, (set to iPhone 5S,) and on an iPad Air, (which may have been running iOS7.)
  
  
  
  • Didn't test other browsers.
  
  
  
  


• Does not work on my iPhone 5S with iOS 8.1 using Safari or Chrome.
  
  
  
  • Didn't try other versions of iOS, other iPhone models or other browsers.
  
  
  
  

How can I resolve this? Are things working as expected, but perhaps there is a resolution limit for showing autocomplete results? If so, do I have to disable autocomplete for lower resolutions and do something else or those users?