Custom markers with only html cant handle click events

[iamsolankiamit]

I have been trying to make custom markers clickable to display alert box when clicked. There is no error but still the functionality doesn't works.

class RichMarkerBuilder extends Gmaps.Google.Builders.Marker
  create_marker: ->
    options = _.extend @marker_options(), @rich_marker_options()
    @serviceObject = new RichMarker options

  rich_marker_options: ->
    marker = document.createElement("div")
    marker.setAttribute('class', 'pin')
    marker.innerHTML = this.args.custom_marker
    { content: marker }

json_array = []
$('.listing').each ->
  li = this
  json = undefined
  json =
    lat: $(this).data('lat')
    lng: $(this).data('lng')
    title: $(this).data('rent-id')
    custom_marker: '<div style=\'  width: 30px;
  height: 30px;
  -webkit-border-radius: 50% 50% 50% 0;
  border-radius: 50% 50% 50% 0;
  background: #333;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
  -webkit-animation-name: bounce;
  -moz-animation-name: bounce;
  -o-animation-name: bounce;
  -ms-animation-name: bounce;
  animation-name: bounce;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;\'><p style=\'width: 22px;
  height: 22px;
  margin: 4px 0 0 4px;
  padding-top: 4px;
  background: #fff;
  color: #333;
  position: absolute;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  text-align: center;
  vertical-align: middle; \'>' + ($(this).data('configuration') - 1) + '</p></div>'
  json_array.push json

  return
###
bindLiToMarker = ($li, marker) ->
  $li.click ->
    handler.getMap().setZoom 14
    marker.setMap handler.getMap()
    #because clusterer removes map property from marker
    marker.panTo()
    google.maps.event.trigger marker.getServiceObject(), 'click'
    return
  return

_.each json_array, (json) ->
  id = 1
  $li = $("#rent"+id)[0]
  bindLiToMarker $li, json.marker
  return
###
window.handler = Gmaps.build 'Google', { builders: { Marker: RichMarkerBuilder} } #dependency injection

#then standard use
handler.buildMap { provider: {}, internal: {id: 'search-map'} }, ->
  window.markers = handler.addMarkers(json_array)
  handler.bounds.extendWith(markers)
  handler.fitMapToBounds()
  $.each window.markers,(i, j) ->
    google.maps.event.addListener j.google_object, 'click', (object) ->
      alert 'hello'
      return
    return

[apneadiving]

At first glance, it cant work because -webkit-border-radius: is not valid json. Btw I have no idea why you pass css there

[iamsolankiamit]

Since adding a class or id didn't work hence i had to add it here. the html is working fine it displays the content as it should

but on click function is not working as expected. it works only for custom info window, but doesn't adds works with event listener

[apneadiving]

here is an example to show you its completely feasible: http://plnkr.co/edit/uYj7hFpf21TPNgi02WR3?p=preview

[jgujgu]

As a note for anyone adding an event to multiple markers, you should iterate through the markers and call marker = handler.addMarker(marker) on each object, and also add the event in the same block.

I initially used markers = handler.addMarkers(markers) and attempted to add events to the return value of addMarkers(), which is probably not an array of the markers.