Gmaps 3 mouseover not working

Question

I am using gmaps3 to show an overlay on mouseover but the mouseover listener is not called when I move my mouse to the marker

Following is the entire code

function init_map(){
          $mapElements=jQuery(".map-details");
          var markers=[];

            $mapElements.each(function(e){
                $e=$(this);
                if(!($e.data("lat")&&$e.data("long")))
                    return;
                var img_p="https://encrypted.google.com/images/srpr/logo4w.png"
                var marker= {
                        latLng:[$e.data("lat"),$e.data("long")], 
                        data:{
                            img_preview: img_p, 
                            properties_name:"023 Central Park [Rent]", 
                            properties_desc:"Lorem Ipsum Go Green",
                            properties_link:"#", 
                            zip:001233, 
                            city:"Jakarta"
                        }
            }
                markers.push(marker);

            });

        <?php /* if($first):/**/?>
         $("#map-canvas-multiple").gmap3({
                map:{
                    // CENTRAL MAP DEFAULT
                    address:"New Delhi, India",
                    options:{
                        zoom:8,
                        scaleControl: false,
                        scrollwheel: false,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: true,
                        mapTypeControlOptions: {
                            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                        }
                    }
                },
                marker:{
                    // DATA LOCATION
                    values:markers
                },
                    events:{
                        mouseover: function(marker, event, context){
                            console.log("hello from mouseover");
                            $(this).gmap3(
                            {
                                clear:"overlay"
                            },

                            {
                                overlay:{
                                    latLng: marker.getPosition(),
                                    options:{
                                        content:  "<div class='info-location'>" +
                                        "<div class='text'><h4>" 
                                        + context.data.properties_name +
                                        "</h4>"+
                                        "<img src='"+ context.data.img_preview +"' width=90> $300.999 <br/>"+
                                        context.data.properties_desc +
                                        "<br/><a href='"+context.data.properties_link +"'class='btn btn-proper btn-small'>See Detail</a></div>" +
                                        "</div>" +
                                        "<div class='arrow-location'></div>",
                                        offset: {
                                            x:-46,
                                            y:-73
                                        }
                                    }
                                }
                            });
                        }

                    }
                });

}
$(document).ready(init_map);

The markers get shown but mousover on them doesn't work No errors in console. The hello mouseover line is not printed to console either

Answer 1

Figured this out after many hours of brainstorming. The events object goes inside the markers object Instead of

            marker:{
                // DATA LOCATION
                values:markers
            },
                events:{
                    mouseover: function(marker, event, context){
                        console.log("hello from mouseover");
                        $(this).gmap3(
                        {
                            clear:"overlay"
                        },

it should be

marker:{
                // DATA LOCATION
                values:markers,
                events:{
                    mouseover: function(marker, event, context){
                        console.log("hello from mouseover");
                        $(this).gmap3(
                        {
                            clear:"overlay"
                        },
                  },