CODEWITHSUNDEEP
javascriptjquerygoogle-places-autocomplete
rubberchicken
rubberchicken

Reputation: 1322

google placecomplete plugin does not allow to select an address anymore

I've been using this script: https://github.com/stephjang/placecomplete for many years with no issues. Tonight I received many complaints that users cannot select the address from the drop down menu. Typing in an address will work fine and results will show up but when trying to select an address, it does not do anything. Does anyone know if something has changed with google blocking placecomplete requests ?

My code:

$inputLocationSearch.placecomplete({ 
        placeholderText: "Enter your site location...", 
        requestParams: {
            componentRestrictions: {country: ['ca','us']}
        } 
    });

Screen shot of issue (mouse or keyboard CANNOT select an address found): enter image description here

Upvotes: 0

Views: 79

Answers (1)

rubberchicken
rubberchicken

Reputation: 1322

Found the issue within the plugin jquery.placecomplete.js code. Replaced default id parameter to use place_id, as id is deprecated with google autocomplete.

I added: apr["id"] = apr["place_id"]; above existing code: apr["text"] = apr["description"];

Here's the whole code block with the addition:

var select2options = $.extend({}, {
        query: function(query) {
            GooglePlacesAPI.getPredictions(query.term, requestParams)
                .done(function(aprs) {
                    var results = $.map(aprs, function(apr) {
                        // Select2 needs a "text" and "id" property set
                        // for each autocomplete list item. "id" is
                        // already defined on the apr object
                        apr["id"] = apr["place_id"];
                        apr["text"] = apr["description"];
                        return apr;
                    });
                    query.callback({results: results});
                })
                .fail(function(errorMsg) {
                    $el.trigger(pluginName + ":error", errorMsg);
                    query.callback({results: []});
                });
        },
        initSelection: function(element, callback) {
            // initSelection() was triggered by value being defined directly
            // in the input element HTML
            var initText = $el.val();

            // The id doesn't matter here since we're just trying to prefill
            // the input with text for the user to see.
            callback({id: 0, text: initText});
        },
        minimumInputLength: 1,
        selectOnBlur: true,
        allowClear: true,
        multiple: false,
        dropdownCssClass: "jquery-placecomplete-google-attribution",
        placeholder: this.options.placeholderText
    }, this.options);

Upvotes: 3

Related Questions