Google Maps Places won't update on .keyboard() input

[carlo-m]

Hi Mottie,

I'm building an app that includes Google Maps functionality. I'm using the Places API so autocomplete addresses users are searching. I had it all working perfectly, then I tried to add the .keyboard() and the page doesn't show the results.

Here is a jsfiddle with an example:
http://jsfiddle.net/3jk8e/1/

The element that contains the result is .pac-container, I've done some testing and found that several properties are triggered on various events but can't figure out why the .keyboard() is preventing all these things from happening, or how to connect the two via the change event in .keyboard().

Thanks in advance!

[Mottie]

Hi @carlo-m!

I moved the demo over to jsbin since it allows adding a complete HTML page: http://jsbin.com/nojuy/1/edit?html,output

It looks like it works to me, but I did have to modify this line

    <input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">

to this:

    <input id="pac-input" class="controls" type="text" placeholder="Enter a location">

since it wasn't recognizing the input until it was all on one line:

[Mottie]

Oh, hmm, the autocomplete extension currently only works with jQuery UI's autocomplete widget. I would have to dig into the Google autocomplete API to make it work with the keyboard.

[carlo-m]

I've done some digging into the API to try to sort it out myself, if there is anything I can do to help point you in the right direction faster, let me know…

On Feb 24, 2014, at 3:26 PM, Rob G notifications@github.com wrote:

Oh, hmm, the autocomplete extension currently only works with jQuery UI's autocomplete widget. I would have to dig into the Google autocomplete API to make it work with the keyboard.

—
Reply to this email directly or view it on GitHub.

[carlo-m]

And thanks for your help!

On Feb 24, 2014, at 3:26 PM, Rob G notifications@github.com wrote:

Oh, hmm, the autocomplete extension currently only works with jQuery UI's autocomplete widget. I would have to dig into the Google autocomplete API to make it work with the keyboard.

—
Reply to this email directly or view it on GitHub.

[Mottie]

Well, I'm not sure how to trigger the autocomplete to update. I've made the following changes (demo):

window.autocomplete = new google.maps.places.Autocomplete(input);
// ...

    $('#pac-input').keyboard({
            usePreview: false,
            position     : {
                of : $('body'),
                my : 'center bottom',
                at : 'center bottom',
                at2: 'center bottom' // used when "usePreview" is false
            },
            change : function(e, keyboard, el) {
                google.maps.event.trigger(autocomplete, 'place_changed');
            }
    });

I can get the autocomplete to fire now, but I'm getting an error Uncaught TypeError: Cannot read property 'geometry' of undefined which is within the autocomplete callback. Maybe there is a different trigger that needs to be fired?

[carlo-m]

I'm going to test some things and get back to this thread asap.

[carlo-m]

I'm trying to use the demo you posted, but it's not working. I type in the .keyboard() and it doesn't update the input field.

[Mottie]

I am trying to get help from Stackoverflow.

[carlo-m]

I tried to comment on the question, but don't have enough points to do so.

I did a test (with the version prior to your updates) to set the value with a function. $('#pac-container').val('Statue of Liberty');

You can see the value in the input but not the drop down. However as soon as you click it, they appear.
I replicated this functionality with $('#pac-container').focus() and setting the value and it worked as well.

On Feb 26, 2014, at 10:30 AM, Rob G notifications@github.com wrote:

I am trying to get help from Stackoverflow.

—
Reply to this email directly or view it on GitHub.

[Mottie]

I found the answer (ref)! See the updated demo:

change : function(e, keyboard, el) {
    google.maps.event.trigger( el, 'focus', {} );
}

[carlo-m]

Yes You did!
Awesome...

Thanks

[carlo-m]

Yes You did!
Awesome...

Thanks

[kiwisecurity]

Wow! This worked for me. Thanks a lot.