jQuery form field focus on google map

Question

I have a page thats basically a giant fullscreen google map. I cannot get any type of focus function to work. Any ideas why? The code is pretty long, so here is the URL, and then some excerpts:

The page we are working on, where we want the location search input box to take focus after the page loads: http://api.raprec.com/maps/frame/

The form field (note I also tried the html5 focus attribute which did nothing:

<input type="text" name="location" id="location" value="" TABINDEX=1 autofocus />

The javascript line that "moves the form into the map" as suggested in google maps documentation:

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById('sidepanel'));

The javascript in the footer of the page:

jQuery(document).ready(function () {jQuery('#location').focus(); });

Answer 1

Elements may only be focused when they are visible .

Your attempt works, but comes too early, because when the element will be moved to it's control-position it looses the focus. What you need is to set the focus when the element has already been placed onto the map. As there isn't an event to find out when it happens(I wouldn't suggest to use DOMNodeInserted here), you need a delay before you set the focus.

Waiting for the tilesloaded-event seems to be sufficient:

google.maps.event
 .addListenerOnce(map,'tilesloaded',function(){jQuery('#location').focus()});

Answer 2

how about html5 autofocus attribute?

http://www.w3schools.com/tags/att_input_autofocus.asp

<input type="text" autofocus>