Google Maps Can't add event to infowindow div

Question

I am trying to add an event to my infowindows so that when a user "mousesout" of the info window is closed. To do this I have added an div around my infowindow.

In my controller where I create the hash I create an infowindow from a partial:

marker.infowindow render_to_string(partial: "/destinations/map_area_hotel_tile.html",      locals: { hotel: hotel })

In the partial I have

<div id="info1"></div>

wrapped around everything else.

I have extended the regular builder and added in some test code so that basic information is printed to the console:

class @AreaMarker extends Gmaps.Google.Builders.Marker

  create_infowindow_on_click: ->
    @addListener 'click', @infowindow_close
    @addListener 'mouseover', @infowindow_binding
    #@addListener 'mouseout', @infowindow_close

  create_infowindow: ->
    return null unless _.isString @args.infowindow

    boxText = document.createElement("div")
    boxText.innerHTML = @args.infowindow
    @infowindow = new InfoBox(@infobox(boxText))

  infobox: (boxText) ->
    if @getServiceObject().position.e < @getServiceObject().getMap().getCenter().e
      # bottom left quad (x (- is left, + is right),y (+ is lower, - is higher))
      if @getServiceObject().position.d < @getServiceObject().getMap().getCenter().d
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(36, -310)
        closeBoxURL: ""
        pane: "floatPane"
      else
        # upper left quad
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(36, -25)
        closeBoxURL: ""
        pane: "floatPane"
    else
      # bottom right quad
      if @getServiceObject().position.d < @getServiceObject().getMap().getCenter().d
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(-324, -310)
        closeBoxURL: ""
        pane: "floatPane"
      else
        # upper right quad
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(-324, -25)
        closeBoxURL: ""
        pane: "floatPane"

  infowindow_binding: =>
    @constructor.CURRENT_INFOWINDOW.close() if @_should_close_infowindow()
    @infowindow ?= @create_infowindow()

    return unless @infowindow?

    @infowindow.open( @getServiceObject().getMap(), @getServiceObject())
    info1 = document.getElementById("info1")
    console.log info1
    google.maps.event.addListener info1, "mouseover", ->
      console.log "in the infowindow"
    @marker.infowindow ?= @infowindow
    @constructor.CURRENT_INFOWINDOW = @infowindow

  infowindow_close: =>
    @infowindow.close( @getServiceObject().getMap(), @getServiceObject())

In the console I get the object printed, but I also get "Uncaught TypeError: Cannot read property '__e3_' of null".

How do I get the listener to work div in the infowindow? What am I doing incorrectly here?

SOLUTION I PUT INTO PLACE:

that = @
google.maps.event.addListenerOnce @infowindow, 'domready', =>
    info1 = document.getElementById("info1")
    $("#infowindowz").hover (->
      console.log "inside the div"
      return
    ), ->
      console.log "outside the div"
      that.infowindow.close that.getServiceObject().getMap(), that.getServiceObject()
      return

I had to add a hover rather than mouseout because of a quark with the way that Google Maps and Infobox handle mouseout events, see:

See Google Maps API v3 Event mouseover with InfoBox plugin

apneadiving apneadiving · Accepted Answer · 2014-06-27T07:21:23

I wrote a working solution here.

I didnt use your infobox method since its not the point there (and I dont know what it does).

To add events on infowindow content, there are two steps:

listen for the domready event from infowindow
then attach events to its html

Example:

google.maps.event.addListenerOnce @infowindow, 'domready', =>
  $(@infowindow.getContent()).on 'click', -> 
    #code here

Google Maps Can't add event to infowindow div

1 Answers