Google Maps, Z Index und Drop Down Javascript Menüs

Question

Ich bin heute auf ein kleines Problem gestoßen: Ich habe ein JS-Dropdown-Menü und wenn ich eine GoogleMap eingefügt ... das Menü wird hinter der Google Map gerendert ... Irgendwelche Ideen, wie man den z Index der Google Map zufällig?

Gracias.

Answer 1

Wickeln Sie die Karte in ein DIV ein und geben Sie diesem DIV einen z-Index von 1. Wickeln Sie Ihr Dropdown in ein DIV ein und geben Sie ihm einen höheren Wert.

Answer 2

Der IE verursacht das Problem

Jedes Div, das von einem relativ positionierten Div umschlossen wird, erhält im IE einen neuen z-Index. Die Art und Weise, wie der IE die äußeren relativen divs interpretiert, ist in der Reihenfolge von html. Das zuletzt definierte steht oben. Unabhängig davon, wie die z-Indizes der Divs innerhalb der relativ positionierten Divs sind.

Lösung für den IE: Definieren Sie das Div, das als letztes in html oben sein soll.

(So z-index funktioniert in IE, aber nur pro Halter div, jeder Halter div ist unabhängig von anderen Halter divs)

Answer 3

z-index (insbesondere im Internet Explorer 7) hat bei mir nicht funktioniert. Ich habe viele verschiedene Kombinationen von hohen und niedrigen Karten-Z-Indizes ausprobiert, hatte aber kein Glück.

Die bei weitem einfachste/schnellste Lösung für mich war, mein Markup/Css neu anzuordnen, damit meine Flyouts/Rollover im Markup aufgelistet sind oben/vorher meine Karte (wortwörtlich, bevor die <div id="map"> ), konnte ich auf diese Weise die z-index bleiben standardmäßig ( auto ) und widme mich wichtigeren Aspekten meiner Webapp ;)

Ich hoffe, das hilft!

<ul id="rollover">
<li><a href="#here">There</a></li>
</ul>
<div id="map">...</div>

Answer 4

Es ist nicht notwendig, den Z-Index sowohl für die Karte als auch für das Menü zu setzen. Wenn Sie einfach den Z-Index des Menüs höher als die Karte einstellen, wird es nicht unbedingt funktionieren.

Setzen Sie den z-Index des Kartenbereichs auf -1. Jetzt wird das Menü nach unten fallen und über der Karte angezeigt.........aber wenn Sie einen Wrapper verwenden, wird die Karte nicht mehr interaktiv sein, da sie sich jetzt hinter dem Wrapper befindet.

Um dies zu umgehen, verwenden Sie die Funktionen onmouseover und onmouseout in Ihrem Wrapper-Div. Stellen Sie sicher, dass diese in Ihrem Wrapper-Div und nicht in Ihrem Karten-Div sind.

onmouseover="getElementById('map').style.zIndex = '10000';" 

onmouseout="getElementById('map').style.zIndex = '-1';"

Answer 5

Ich habe ein Dropdown im Google-Stil erstellt und hatte das gleiche Problem ... mit der V3-Api für Google Maps, erstellen Sie einfach ein Steuerelement und platzieren Sie es auf der Karte mit:

map.controls[google.map.ControlPosition.TOP].push(control);

Da es sich um ein Dropdown-Menü handelt, stellen Sie einfach sicher, dass der z-Index des enthaltenden Divs am höchsten ist (z=3) und der Dropdown-Teil, der die Menüpunkte enthält, niedriger ist als das enthaltende Div (z=0).

Hier ist ein Beispiel .

Meiner Erfahrung nach müssen Sie Unterlegscheiben nur für Plug-ins verwenden (wie bei Google Earth).