gmap3 mouseover overlay for infowindow

Question

using gmap3 (v6.0)

I have a custom css marker that I am using. In order to get the custom css marker to appear on the map I had to insert it as an 'overlay'. I can't seem to get an infowindow to appear on 'mouseover' events.

Here's a jsFiddle --> http://jsfiddle.net/tmykx/1/

FYI, I had to insert a marker in order to get the overlays to appear which is why the marker is at latLng [0,0]

I know the error is somewhere in the 'event':

$(document).ready(function() {
var point1 = [29.425705,-98.486075];
var point2 = [29.426928,-98.437418];
$('#gmap-4').gmap3({
        marker:{
            latLng:[0,0]
        },
           overlay:{
            values:[
                {
                    latLng:point1,
                    data:"<div class='infobox'><span class='x1'>The Alamo </span><br/><span class='x2'>300 Alamo Plaza, San Antonio TX 78205</span></div>",
                    options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
                },

                {
                    latLng:point2,
                    data:"<div class='infobox'><span class='x1'>AT&T Center </span><br/><span class='x2'>1 AT&T Center Pkwy, San Antonio TX 78219</span></div>",
                    options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
                }
            ]
            },
            map:{
            options:{
              center:[29.4401784,-98.4793855],
              zoom: 12
              }
            },
            options:{
              draggable: false
            },
             events:{
              mouseover: function(overlay, event, context){
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.open(map, overlay);
                  infowindow.setContent(context.data);
                } else {
                  $(this).gmap3({
                    infowindow:{
                      anchor:overlay, 
                      options:{content: context.data}
                    }
                  });
                }
              },
              mouseout: function(){
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
              }
            }
    }); 

});

Answer 1

The issue comes from the "overlay" property that is closed before the rest of the properties. "overlay" should instead enclose "map", "options" and "events".

The marker at [0,0] is not necessary anymore.

Here is a correct fiddle: http://jsfiddle.net/JxGyk/3/

And here is the code:

$(document).ready(function() {
    var point1 = [29.425705,-98.486075];
    var point2 = [29.426928,-98.437418];
   $('#gmap-4').gmap3({
       marker:{
           //latLng:[0,0]   <--- not necessary anymore
       },
       map:{
           options:{
           center:[29.4401784,-98.4793855],
           zoom: 12
           }
       },
       overlay:{
           values:[
               {
                   latLng:point1,
                   data:"<div class='infobox'><span class='x1'>The Alamo </span><br/><span class='x2'>300 Alamo Plaza, San Antonio TX 78205</span></div>",
                   options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
               },
               {
                   latLng:point2,
                   data:"<div class='infobox'><span class='x1'>AT&T Center </span><br/><span class='x2'>1 AT&T Center Pkwy, San Antonio TX 78219</span></div>",
                   options:{content:"<div class='masterpin bounce'></div><div class='pulse'></div>"}
               }
           ], // here I remove the closed bracket for "overlay"
           options:{
               draggable: false
           },
           events:{
               mouseover: function(overlay, event, context){
                   var map = $(this).gmap3("get"),
                       infowindow = $(this).gmap3({get:{name:"infowindow"}});
                   if (infowindow){
                       infowindow.open(map, overlay);
                       infowindow.setContent(context.data);
                   } else {
                       $(this).gmap3({
                           infowindow:{
                               anchor:overlay, 
                               options:{content: context.data}
                           }
                       });
                   }
               },
               mouseout: function(){
                   var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                   if (infowindow){
                       infowindow.close();
                   }
               }
           } // close events
       } // close overlay
   });     
});