Link to home
Start Free TrialLog in
Avatar of erzoolander
erzoolander

asked on

Jquery GMAP3 Hierarchy

I'm using JQuery gmap3 to display a Google map. I have the entries within an array, using clustering.

Here is my code.
$('#searchholder').gmap3({
    center: [0,0],
    zoom: 2
  })
  .cluster({
    size: 50,
    markers: markers,
    options: {
        draggable: false
    },
    events: {
        mouseover: function(markers, event, context){
            alert("rolled over");
    var map = $(this).gmap3("get"),
      infowindow = $(this).gmap3({get:{name:"infowindow"}});
    if (infowindow){
      infowindow.open(map, marker);
      infowindow.setContent(context.data);
    } else {
      $(this).gmap3({
        infowindow:{
          anchor:marker, 
          options:{content: context.data}
        }
      });
    }
  },
  mouseout: function(){
    var infowindow = $(this).gmap3({get:{name:"infowindow"}});
    if (infowindow){
      infowindow.close();
    }
  }
    },
    cb: function (markers) {
      if (markers.length > 1) { // 1 marker stay unchanged (because cb returns nothing)
        if (markers.length > 2) {
          return {
            content: "<div class='cluster cluster-1'><p>" + markers.length + "<p></div>",
            x: -22,
            y: -22
          };
        }
        if (markers.length > 10) {
          return {
            content: "<div class='cluster cluster-2'><p>" + markers.length + "<p></div>",
             x: -22,
            y: -22
          };
        }
        if (markers.length > 20) {
          return {
            content: "<div class='cluster cluster-3'><p>" + markers.length + "</p></div>",
             x: -22,
            y: -22
          };
        }
        if (markers.length > 50) {
          return {
            content: "<div class='cluster cluster-4'><p>" + markers.length + "<p></div>",
            x: -22,
            y: -22
          };
        }
      }

    }

  })
  ;

Open in new window


The clustering works properly, but I'm misunderstanding something on how to properly call events to bring up an infowindow (upon rollover). I've tried several variations of what you see above - with no success.

How should the event handler be inserted/managed?
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial