Gmaps 3 mouseover not working - google-maps-api-3

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"
},
},