Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Weird black spots on custom Google Map with IE

I'm getting some weird black spots with a custom map page (via the Google Maps API v2.x) I have created. (Click SERVICIOS and then the icon farthest south to generate image shown below.) The issue seems to only appear when using Internet Explorer. I'm wondering if this is a common problem and if there is a common fix?

Any ideas?

Thanks.

UPDATE

In this picture the browser is IE 8.0.6001.18702

Its hard for me to get specific details about the computer because my client took this screenshot, I have been unable to reproduce these black spots.

removed dead ImageShack link

like image 958
Dom M. Avatar asked Mar 11 '10 22:03

Dom M.


3 Answers

This is completely related to the zooming feature in IE8. Ask your client to set his zoom level back to 100% and the black spots magically disappear. This is probably why not everyone can reproduce this problem, because it's a local browser setting. But even now (months later), when I follow your link -- or if I simply go to maps.google.com, do a search, and get the Marker/InfoWindow -- if I have the zoom level set to > 100%, I see those black shadow pieces where Google's javascript is trying to piece together the drop-shadow. So QED: Microsoft STILL has a bug in their scaling algorithm for transparent PNGs in IE8.

Weird black spots on custom Google Map with IE http://img340.imageshack.us/img340/751/googleblackholes.jpg

like image 58
electromaggot Avatar answered Oct 21 '22 03:10

electromaggot


This black (png?) bug might be related to this issue:

IE 8 Black bug

What version of IE are you running? (Note that only some part of the drop shadow seems to be affected.)

like image 28
futureelite7 Avatar answered Oct 21 '22 05:10

futureelite7


I failed to reproduce this error (IE6,7,8,FF,Chrome), but I can offer you to try GMaps Utility Library. It allows to create custom info windows using css (live example that use ExtInfoWindow library extension). This library adds you an opportunity to create info windows without transparency which I think is a current problem.

I've tryed to look what google map API doing with info window at IE8 and found that it add CSS filter:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://maps.gstatic.com/intl/ru_ALL/mapfiles/transparent.png");

Wich reproduce shadow under the info window based on transparent png image, maybe at your client computer this opportunity (filter) disabled, so I think the best solution is to use library i suggested.

Also you can try ie7-js library that has IE-PNG fix transparent functionality.

like image 43
antyrat Avatar answered Oct 21 '22 04:10

antyrat