Google Maps infobox position next to marker not over the marker

Question

I want to know how I can position the infobox for the Google markers, not over the pin but something similar to this website. Here, 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?

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();
      }
    }