Align infobox to marker in Google Maps

Question

I am using the InfoBox plugin, and I have the following code:

Gmaps.map.infobox = function(boxText) {
  return {
     content: boxText
    ,disableAutoPan: false
    ,maxWidth: 0
    ,pixelOffset: new google.maps.Size(-140, 0)
    ,zIndex: null
    ,boxStyle: {
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/examples/tipbox.gif') no-repeat"
      ,opacity: 0.75
      ,width: "280px"
       }
    ,closeBoxMargin: "10px 2px 2px 2px"
    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
    ,infoBoxClearance: new google.maps.Size(1, 1)
    ,isHidden: false
    ,pane: "floatPane"
    ,enableEventPropagation: false
 }};

With a marker of dimensions 77x80 pixels, when the InfoWindow is shown, it aligns correctly at the bottom of the marker, as you can see here:

However, if I change the size of the marker to 35x44 px, the InfoWindow is not exactly aligned at the bottom of the marker, as you can see here:

Any thoughts on how can I make it completely aligned at the bottom?

EDIT: For the small markers, I created them by setting this in the library I use (gmaps4rails):

marker.picture({
                  :picture => "assets/juice-pin-small.png",
                  :width => 35,
                  :height => 44,
                 })

For the big markers, I create them by setting this:

marker.picture({
                      :picture => "assets/juice-pin-small.png",
                      :width => 70,
                      :height => 88,
                      :marker_anchor => [23,78]
                     })

Answer 1

What I know is definitely not the best solution, because you need two sets of options if you will use both sized markers.

Anyway, the positioning of the infobox can be changed with pixelOffset: new google.maps.Size(-140, 0);, in your case, to move the box left, make the first number more negative (like, -145).

Thought of something else: edit the marker itself and shift it a few pixels.