Mixing google places and jQuery will lead to frustration

var input = document.getElementById($("#from"));
var autocomplete = new google.maps.places.Autocomplete(input, autoOptions);

If you are familiar with both jquery and google places javascript API, you will raise your eyebrows wondering why I am posting such trivial code in this blog. If you really know both apis you are probably grinning from ear to ear because I’ve run into a problem that you also ran into and managed to solve on your own (cause googling does produce anything helpful). So what gives? what’s wrong with the code above? Nothing but it will still produce the following error in the javascript console.

Uncaught TypeError: Object [object Object] has no method 'getAttribute'

lL
uL.(anonymous function).rl
(anonymous function)
(anonymous function) %7Bmain,places%7D.js:9
df.(anonymous function).Lc.c %7Bmain,places%7D.js:24
L %7Bmain,places%7D.js:9
ff %7Bmain,places%7D.js:24
kf %7Bmain,places%7D.js:24
(anonymous function)
gf.controls
(anonymous function) %7Bmain,places%7D.js:24
b %7Bmain,places%7D.js:10
df.(anonymous function).Lc %7Bmain,places%7D.js:24
L %7Bmain,places%7D.js:9
df.(anonymous function).Lc %7Bmain,places%7D.js:24
cf.(anonymous function).je %7Bmain,places%7D.js:23
df.(anonymous function).Lc %7Bmain,places%7D.js:24
hf %7Bmain,places%7D.js:24
(anonymous function)

 

It took quite a bit of hair pulling before I tried:

var input = document.getElementById('from_address');
var autocomplete = new google.maps.places.Autocomplete(input, autoOptions);

Wish I was a JS n00b, I would have tried that sooner. Because this works while using a jQuery selector does not!!

May 27th, 2012 | Posted in Uncategorized
Tags: ,
  1. Action_G
    Jul 23rd, 2012 at 13:33 | #1

    Ooo, thanks very much! I was suffering for hours with this problem!

  2. El_Arturo
    Feb 8th, 2013 at 15:47 | #2

    In the same situation like Action_G ;) Thxxxx

  3. neor
    Mar 19th, 2013 at 13:18 | #3

    Thanks you !
    spent hours on it.

  4. Mar 26th, 2013 at 23:37 | #4

    AHHHHH thank you – you’ve just saved me hours and hour of trying to solve this.

  5. Arta
    Apr 3rd, 2013 at 21:57 | #5

    Ran into something similar, too. Here’s how to do it:

    var input = $(‘#from’)[0];
    or
    var input = $(‘#from’).get(0); //<= this reads better IMO

    credit: http://stackoverflow.com/questions/4069982/document-getelementbyid-vs-jquery

  6. Monir
    Jul 11th, 2013 at 09:26 | #6

    Thanks a lot…

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>