Google maps for rails infowindow.open not working

Question

I am using the goolge maps 4 rails gem.

I am trying to have the infowindow open for every marker on mouse over, and close on mouse out. I can't get infowindow.open to work.

Using the following code I get: Uncaught ReferenceError: infowindow is not defined. What am I doing wrong? Is this the right spot to add this listener, is there a built in method that will save code?

<script type="text/javascript">

handler = Gmaps.build("Google", 
  { markers: 
    { clusterer: { 
        gridSize: 8,
        maxZoom: 12,
        styles: [ {
              textSize: 1,
              textColor: '#45A6DD',
              url: 'images/mapCluster.png',
              height: 51,
              width: 51 }      
            ]
      }
    } 
});

var image = 'images/marker.png';

handler.buildMap({
    provider: {
      zoom: 4,
      minZoom: 4,
      maxZoom: 13,
      draggable: true, 
      zoomControl: true, 
      scrollwheel: false, 
      disableDoubleClickZoom: true,
      disableDefaultUI: true,
      center: new google.maps.LatLng(37.8282, -98.5795),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: Maps.styles,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL
      }
    },
    internal: {
      id: 'map'
    }
  },
  function(){
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    for (i = 0, len = markers.length; i < len; i++) {
      marker = markers[i].getServiceObject();
      google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.serviceObject.open(Gmaps.map.map, marker.serviceObject);
      });

    }
  }
);

</script>

Not sure if it is relevant but here is the hash I am passing through the controller action:

@hash = Gmaps4rails.build_markers(@cities_for_map) do |city, marker|
  marker.infowindow render_to_string(:partial => "/destinations/map_tile.html", :locals => { :city => city})
  marker.lat city.latitude
  marker.lng city.longitude
  marker.picture({ 
    "url" => "/images/Marker.png",
    "width" => 20,
    "height" => 20 })
end

I added the following to my scripts

class @MyMarker extends Gmaps.Google.Builders.Marker

  create_infowindow_on_click: ->
    @addListener 'mouseover', @infowindow_binding

and updated my handler:

handler = Gmaps.build("Google",
      { markers: 
        { clusterer: { 
            gridSize: 8,
            maxZoom: 12,
            styles: [ {
                  textSize: 1,
                  textColor: '#45A6DD',
                  url: 'images/maps/cluster.marker.png',
                  height: 51,
                  width: 51 }      
                ]
          }
        },
        builders: {
          Marker: KhMarker
        }
    });

It now works :)

Answer 1

Indeed infowindow is not defined in your code.

Playing with infowindows must be done in the marker builder, basically you want to override the method here.

# in a coffee file
class @YourBuilder extends Gmaps.Google.Builders.Marker # inherit from base builder

  create_infowindow_on_click: ->
    google.maps.event.addListener @serviceObject, 'mouseover', @infowindow_binding

# then pass your builder when you create one handler
handler = Gmaps.build 'Google', { builders: { Marker: YourBuilder } }