Mixing google places and jQuery will lead to frustration

2012 May 27 at 13:30 » Tagged as :jquery, google,

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!!