Home/ Questions/Q 9215797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T02:16:59+00:00

I have a full page google map that i want to be able to

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0