title: Google Maps not showing
body: <p>I have a Google Map that won't show up. The Problem seems to be the same in FF &amp; Chrome, but even more "bad" in IE (always latest version).</p>
  
  <p>In FF &amp; Chrome I have a problem with the <code>position: relative;</code> css element style. As soon as I switch to (with dev tools) <code>position: absolute(or: fixed);</code> everything displays fine in FF. In Chrome the map only shows the upper 30% (from top).</p>
  
  <p>In IE the map doesn't even get loaded.</p>
  
  <p>Here's the script stuff from the <code>&lt;head&gt;</code>. Content is only for testing and means nothing.
  <em>Note: I only use this to get the map loaded. This will be exchanged later.</em></p>
  
  <pre><code>&lt;!-- Script inside &lt;head&gt; tag --&gt;
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?
          file=api&amp;amp;
          v=2&amp;amp;
          key=&lt;?php echo self::GOOGLE_API_KEY; ?&gt;&amp;amp;
          sensor=false"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function initialize() 
      {
          var startpos = new google.maps.LatLng( 50.978056,11.029167 );
          var ops = { 
               zoom:      6
              ,center:    startpos
              ,mapTypeId: 
                   google.maps.MapTypeId.ROADMAP
                  ,tileSize: new google.maps.Size( 256, 256 )
          }
          var map = new google.maps.Map( document.getElementById("map_canvas"), ops );
          var pos1 = new google.maps.LatLng( 50.7510776,12.4820724 );
          var contentString1 = '&lt;div align="left" dir="ltr" class="infowin"&gt;&lt;h3&gt;test&lt;/h3&gt;testen&lt;/div&gt;';
          var infowindow1 = new google.maps.InfoWindow( {
               content:   contentString1
              ,maxWidth:  5
          } );
          var marker1 = new google.maps.Marker( { 
               position:  pos1
              ,map:       map
              ,title: 'test' 
          } );
          google.maps.event.addListener(
               marker1
              ,'click'
              ,function() { 
                  infowindow1.open( map, marker1 );
              }
          );
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>This is the <em>whole</em> mark up for the page.</p>
  
  <pre><code>&lt;!-- html markup - There *really* isn't anything else --&gt;
  &lt;body onload="initialize()"&gt;
  &lt;div id="map_canvas" style="width:100%; height:100%;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have spend a lot of time on google without finding anything. Any ideas? Thanks!</p>