1

Google マップの左上隅に配置するコントロールを含む小さなフォームがあります。

この問題に対するいくつかの回答を見つけました。

Googleマップ上にdivを浮かせる方法

GoogleマップAPIを使用したdivの上のdiv

しかし、どれもうまくいきませんでした。フォーム コントロールのないマップが表示されるか、フォーム コントロールのみでマップが表示されません。何が問題なのですか？

私の最新の HTML と CSS:

HTML:

<html>
    <body>
    <div id="wrapper">
        <div id="map_canvas"></div>
        <div id="over_map">
            <p>Select something!</p>
            <select>
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
            </select>
        </div>
    </div>
    </body>
</html>

CSS:

html { height: 100%; width: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { position: absolute; top: 10px; left: 10px; height: 100%; width: 100%; }
#wrapper { position: relative; }
#over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
4

1 に答える 1

3

CSS から次の行を削除します。

#wrapper { position: relative; }

マップのパンとズームのコントロールは左上にあるため、配置に注意するか、これらのコントロールを無効にしてください。

jsfiddle での作業例: http://jsfiddle.net/pratie/2sJSg/

于 2012-05-16T19:08:53.577 に答える