google map infobox position

Question

I've been googling that question for some time and all I got is headache. I add google marker with infobox on my google map, but the infobox is located lower than marker, how ever I would really appreciate it to be over the marker. Does anyone know how to do it?

And please don't gove some links to somewhere, I was seeing it for a loooong time today. Thank you in advance.

score 15 · Accepted Answer · answered Feb 18 '13 at 15:14

15

set the alignBottom-property of the infoBox to true (default is false). For further adjustments of the position use the pixelOffset-property of the infoBox

answered Feb 18 '13 at 15:14

Dr.Molle

116,463
16
195
201

What I have right now is already working as expected, the infobox is already on the top of the marker. I have also a div on the uppermost part of the map, and on some occasions, the infobox is overlapper by it. How would I adjust the infobox such that when the infobox is being overlapped by the div, it will adjust it's position, making it lower than the usual position? Thanks in advance. – Tsukimoto Mitsumasa Jun 27 '13 at 18:33

score 4 · Answer 2 · answered Feb 18 '13 at 15:24

4

By default the infoBox will point the bottom left of the marker. You can simply do this:

var ib= new InfoBox({
    ....//other properties,
    pixelOffset: new google.maps.Size(-25, 0) //where your marker's height is 25px
});

answered Feb 18 '13 at 15:24

Carlos Martinez T

6,458
1
34
40

4

I think the first number is the `x-offset` (width) and the second is the `y-ofset` (height). At least that's what I was seeing when I added this to my InfoBox settings – hellatan Nov 04 '13 at 13:54

score 3 · Answer 3 · answered Mar 04 '16 at 06:45

infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, -45),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') 0% 100% no-repeat",
            opacity: 0.75,
            width: "280px"
        },
        infoBoxClearance: new google.maps.Size(1, 1),
        alignBottom: true
    });


#infobox {
    border:2px solid black;
    margin-bottom: 8px;
    background:#333;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding: .5em 1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow:0 -1px #000000;
    -webkit-box-shadow: 0 0  8px #000;
    box-shadow: 0 0 8px #000;
}

// Load the customized arrow from local

google map infobox position

3 Answers3

Linked