CODEWITHSUNDEEP
javascriptioscordovagoogle-maps
geoffliu
geoffliu

Reputation: 520

Cannot select address from autocomplete on Google Maps Javascript API

The setup is Google Maps Javascript API (v3) on a PhoneGap app, and I've setup 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 builds and in the browser. Problem is when I run this under iOS. I type a string in the search box, the autocomplete results are shown, but clicking on one of them simply closes the drop down, but the result is not populated into the search box. The listener doesn't fire either. No error shows on the Javascript console.

This is all Google's code, so I'm at a loss for how to debug. Any help would be appreciated. Thanks!

Upvotes: 7

Views: 2554

Answers (1)

Oleg Andreyev
Oleg Andreyev

Reputation: 657

I've been struggling with same issue on iPhone in one of my projects, after hours of investigation, found that issue is 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);
};

Because .pac-container has only div and span, FastClick assumes that it's not clickable and calls preventDefault and to overcome this issue I've added needsclick class to all .pac-* elements

Upvotes: 3

Related Questions