I've got a weird problem with the openInfoWindowHtml() method using gmap. It's a bit difficult to explain so i'll provide an image.
http://a.imageshack.us/img84/8697/faulty.png
As you can see the balloon and its content are correctly drawn. However the corners have become completely transparent and so have parts of the balloons shadow and even the close button is not visible.
This happens only in internet explorer. Using 8 atm, haven't been able to test on other versions.
My code is pretty much a copy / paste job. In the head section:
<script type="text/javascript">
google.load("maps", "2", {"language" : "nl"});
google.load("search", "1");1
</script>
And the call itself:
var getGmapByZipcode = function(postcode){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl( new GMapTypeControl()) ;
var geocoder = new GClientGeocoder();
geocoder.setBaseCountryCode("nl");
geocoder.getLatLng(
postcode,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
map.openInfoWindowHtml(map.getCenter(), '<div id="gmapoverlay"><b>Testcompany</b><br />Test Adres<br />Zipcode City<br />Countryline</div>');
}
}
);
}
}
getGmapByZipcode() resides in a file calling several jquery functions.
No i suspect it must be some layering issue, but thus far mucking about with z-indexes hasn't resolved anything. Now since this problem only occurs in IE, not in chrome nor firefox i'm at a loss here.
Anyone able to give me any ideas where to look?