why does geocomplete not trigger bounds_changed event?

Question

I have a google map which takes up the whole screen size. There is a top bar which has the geocomplete text field, so that I can type in the place name and the map moves to that place. However, the problem is that it fails to trigger the bounds_changed event.

The second problem is, when the map first loads, I can't drag it (the hand icon doesn't appear). It is only after I move to some other place using the geocomplete field that I'm able to drag the map. Following is the relevant code snippet I've used.

$(document).ready ->
 google.maps.event.addListener window.map, "bounds_changed", ->
   // Here I fire an ajax request to retrieve some data and display it in a custom overlay.
 if navigator.geolocation
navigator.geolocation.getCurrentPosition(set_user_location,error, { 'enableHighAccuracy' : 'true' })
  set_user_location = (position) ->
mapOptions =
  center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
  zoom: 14
window.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)
$('.countries-dropdown').geocomplete
  map: '#map-canvas'
  mapOptions: { scrollwheel: true }
  bounds: true
.bind 'geocode:result', (event,result) ->
  console.log 'result'
  console.log result
.bind 'geocode:error', (event,result) ->
  console.log 'error'

Please leave a comment if the above information is not enough. Thanks.

Answer 1

Nevermind. I fixed the bug myself. Just needed to give the window.map object in place of the selector. That is, instead of this

$('.countries-dropdown').geocomplete
map: '#map-canvas'

used this

$('.countries-dropdown').geocomplete
map: window.map