当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Div over Google map

问题描述:

I have a full page google map that i want to be able to put some images overlayed on the map. so far i have the following code:

<style type="text/css">

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

#wrapper { position: relative; }

#over_map { position: absolute; background-color: transparent; top: 10px; left: 10px; z-index: 99; }

#over_map_right { position: absolute; background-color: transparent; top: 10px; right: 10px; z-index: 99; }

</style>

....

<body>

<div id="wrapper">

<div id="map_canvas" style="width:100%; height:100%"></div>

<div id="over_map">Left hand stuff goes here</div>

<div id="over_map_right">right hand stuff goes here</div>

</div>

</body>

This code seems right to me, but when open it, i get a plain white screen with just

<div id="over_map">Left hand stuff goes here</div>

<div id="over_map_right">right hand stuff goes here</div>

displayed.

is there another way to do this? Could it be done with iframes or something like that?

mike

网友答案:

The problem is that google maps need a concrete height attribute in order to work.

Here's an example: http://jsfiddle.net/9qDhX/

Note that height: 400px; will work, but height: 100%; will leave you with a blank screen.

There are various workarounds to get a "full screen" map. The best, cross-browser ones will use some kind of jQuery to set the height of the map_canvas based on the current window size, with a listener to window resize to reset the height.

网友答案:

in addition to Jeff-Meadows answer.

To get the full screen map:

you can use jquery onload event

    $(function () {
        $("#map_canvas").css("height", $(window).height());
    });

This will enable full screen

分享给朋友:
您可能感兴趣的文章:
随机阅读: