div z-index issue with google maps

Question

I'm using a google map inside a div. This div is positioned into another div creating a scrolling pane like so:

<div id="divcontent">
  <div id="pane">

     <!--here's our google map div-->
     <div id="map"></div>

  </div>
</div>

Now, the div "divcontent" has not got a z-index. Div "pane" has a z-index of 1.

Loading a map by zipcode works just fine in this situation. However, when i add a gmarker ( see code below ) a problem occurs in IE (using version 8). A part of the map has now become transparent. It's the part where the shadow of the gmarker shadow is drawn.

I've toyed around with z-indices for hours now, but am at a loss. Haven't got a clue whats going on.

Any advice?

  var getGmapByZipcode = function()
  {
    var escapecode = unescape(postcode);
    if (GBrowserIsCompatible()) 
    {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl( new GMapTypeControl()) ;

      var geocoder = new GClientGeocoder();
      geocoder.setBaseCountryCode("es"); 
      geocoder.getLatLng(
        escapecode,
        function(point) {
          if (point) {
            map.setCenter(point, 13);
            map.openInfoWindowHtml(point, '<div id="gmapoverlay">sometext</div>');
            var marker = new GMarker(point);
            map.addOverlay(marker);
          }
        }
      );


    }
  }