google maps infobox position next to marker not over the marker

Question

I didn't get enough attention yesterday to this post but after doing a bit more research I want to know how I can position the infobox for the google markers not over the pin but something similar to this website when you hover over group of markers the infobox is shown at the same point thus the mouseout event is not triggered because the mouse is still over the group of markers. I want to know how I can achieve something similar with the post I did yesterday. So to wrap up the post, is there any styling code which I can apply so I can show the infobox right over the marker? Every advice is very very much appreciated. Thanks, Laziale

Answer 1

It is set at 140px in right by default, so set the values for x and y respectively and the box will appear there everytime.

offset values you can arrange yourself.

try this code..

 var infowindows = []; //make it global
 var popup = new InfoBox({
      // size: new google.maps.Size(420,130),
        content:content_info
       ,pixelOffset: new google.maps.Size(10, -100) //these are the offset values to be adjusted accordingly..
       ,disableAutoPan: false
       ,closeBoxMargin: "5px 5px 2px 2px"
       ,boxStyle: {opacity: 0.95
              }

    });

infowindows.push(popup);
 google.maps.event.addListener(marker, 'mouseover', function() {
        close_popups();
        map.panTo(mycenter1);
        popup.open(map, marker);


        // currentPopup = null;
      });

function close_popups(){
      for(var i = 0; i<infowindows.length; i++){
        infowindows[i].close();
      }
    }

Answer 2

You can use the alignBottom and pixelOffset properties of InfoBox to achieve what you want. I created a fiddle which admittedly looks terrible, but I think it can get you on the right track in terms of the implementation. You can polish it to your liking after you get it working :) FIDDLE

Basically, you specify the options like:

var ibOptions = {
    content: 'your content',
    pixelOffset: new google.maps.Size(-5, -15),
    alignBottom: true
};

You can adjust the pixelOffset to your liking, so the content shows over the marker and the mouseout is not triggered.

Then you do this to bind to the mouseover event (which you probably already know):

google.maps.event.addListener(marker, "mouseover", function (e) {
    ib.open(map, this);
});