Unable to select an auto-complete address in the Google Maps API.

Question

The setup is the Google Maps Javascript API (v3) in the PhoneGap app, and I'm setting up autocomplete:

var that = this this.autocomplete = new google.maps.places.Autocomplete(domNode) this.listener = google.maps.event.addListener( this.autocomplete, 'place_changed', function (place) { var place = that.autocomplete.getPlace() ... } }) 

And this code works on my Android installations and in the browser. The problem is that I am running this under iOS. I enter a line in the search field, the autocomplete results are displayed, but when you click on one of them the drop-down menu just closes, but the result is not filled in the search field. The listener does not work either. Javascript console does not display error.

This is all Google code, so I find it difficult to debug. Any help would be greatly appreciated. Thanks!

Answer 1

I struggled with the same problem on the iPhone in one of my projects, after several hours of investigation, I discovered that the problem was caused by fastclick lib.

 FastClick.prototype.onTouchEnd = function(event) { ... if (!this.needsClick(targetElement)) { event.preventDefault(); this.sendClick(targetElement, event); } return false; }; FastClick.prototype.needsClick = function(target) { 'use strict'; switch (target.nodeName.toLowerCase()) { // Don't send a synthetic click to disabled inputs (issue #62) case 'button': case 'select': case 'textarea': if (target.disabled) { return true; } break; case 'input': // File inputs need real clicks on iOS 6 due to a browser bug (issue #68) if ((this.deviceIsIOS && target.type === 'file') || target.disabled) { return true; } break; case 'label': case 'video': return true; } return (/\bneedsclick\b/).test(target.className); }; 

Since .pac-container only has div and span , fastclick assumes it is not preventDefault and calls preventDefault , and to overcome this problem I added the needsclick class to all .pac-* elements