2013-02-18 17 views
8

Ich habe diese Frage seit einiger Zeit gegooglet und alles, was ich habe, ist Kopfschmerzen. Ich füge Google-Marker mit Infobox auf meiner Google-Karte hinzu, aber die Infobox befindet sich niedriger als Marker, wie auch immer ich es wirklich schätzen würde, über dem Marker zu sein. Weiß jemand wie es geht?google map infobox position

Und bitte nicht einige Links zu irgendwo, ich sah es für eine loooong Zeit heute. Vielen Dank im Voraus.

Antwort

14

Setzen Sie die alignBottom -Eigenschaft der InfoBox auf true (Standard ist false). Für weitere Anpassungen der Position verwenden Sie die pixelOffset -Eigenschaft der InfoBox

+0

Was ich jetzt haben, ist schon wie erwartet funktioniert, die infobox ist bereits auf der Spitze des Markers. Ich habe auch ein Div auf dem obersten Teil der Karte, und in einigen Fällen wird die Infobox von ihm überlagert. Wie würde ich die Infobox so anpassen, dass die Infobox beim Überlappen durch das div die Position des Infoboxes verändert und somit niedriger als die normale Position wird? Danke im Voraus. –

4

Standardmäßig zeigt die InfoBox den unteren linken Rand des Markers. Sie können dies einfach tun:

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

Ich denke, die erste Zahl ist der 'x-offset' (Breite) und die zweite ist die' y-ofset' (Höhe). Zumindest sah ich das, als ich das zu meinen InfoBox-Einstellungen hinzufügte – hellatan

2
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; 
} 

// Lade den angepassten Pfeil von lokalen