javascript - Google Maps Can't add event to infowindow div -

javascript - Google Maps Can't add event to infowindow div -

i trying add together event infowindows when user "mousesout" of info window closed. have added div around infowindow.

in controller create hash create infowindow partial:

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

in partial have

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

wrapped around else.

i have extended regular builder , added in test code basic info printed 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: -> homecoming 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 (- left, + right),y (+ lower, - 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() homecoming unless @infowindow? @infowindow.open( @getserviceobject().getmap(), @getserviceobject()) info1 = document.getelementbyid("info1") console.log info1 google.maps.event.addlistener info1, "mouseover", -> console.log "in infowindow" @marker.infowindow ?= @infowindow @constructor.current_infowindow = @infowindow infowindow_close: => @infowindow.close( @getserviceobject().getmap(), @getserviceobject())

in console object printed, "uncaught typeerror: cannot read property '__e3_' of null".

how listener work div in infowindow? doing incorrectly here?

solution set place:

that = @ google.maps.event.addlisteneronce @infowindow, 'domready', => info1 = document.getelementbyid("info1") $("#infowindowz").hover (-> console.log "inside div" homecoming ), -> console.log "outside div" that.infowindow.close that.getserviceobject().getmap(), that.getserviceobject() homecoming

i had add together hover rather mouseout because of quark way google maps , infobox handle mouseout events, see:

see google maps api v3 event mouseover infobox plugin

i wrote working solution here.

i didnt utilize infobox method since not point there (and dont know does).

to add together events on infowindow content, there 2 steps:

listen domready event infowindow then attach events html

example:

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

javascript google-maps-api-3 infowindow gmaps4rails