Can't get the Google Map div fixed_问答_开发者

开发者 https://www.devze.com 2023-03-17 18:36 出处：网络

I\'m trying to get the Google Map div fixed so it becomes always visible, but somehow the style property \"position:fixed\" is not working. The code is the following:

I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="layout" content="main" />
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
    </style>
      <开发者_如何学Python;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">

           Some script

      </script>
  </head>
  <body onload="initialize()">
     <div class="nav">

            First div

     </div>
     <div id="artistList">

            Second div

     </div>
     <div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">

            Map div

     </div> 
  </body>
</html>

Any help? Thanks very much

This will solve it:

<div id="fixed" style="position:fixed; top:0">
  <div id="map_canvas" style="width:100%; height:100%">
    [map content goes here]
  </div>
</div>

You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:

<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
    position: fixed;
    right: 0;
    top: 0;
    width: 90%;
    height: 90%;
    border:1px solid #f00;
    margin:10px;
}
</style>

I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.

But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?

Najeeb's solution did not work for me.

Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.