Question

I’m having some trouble with drawing polygons on a Google Map through the JavaScript API v3. The problem is that Maps seems to draw random lines coming off the polygons in Internet Explorer versions other than 9. It looks fine in any other browser I’ve tried.

The map can be viewed here: Coverage Map

It’s a coverage map that shows counties serviced by a particular company. Each county overlay is built from US Census boundary coordinate data and added to the map individually.

I’ve looked around quite a bit and, while people seem to have a lot of issues with Maps and Internet Explorer, I can’t find anything related to my particular problem. The lines appear to be an extension of the polygon as if my coordinates were wrong, but I’ve checked them thoroughly and they seem consistent.

The lines converge on the corners of tiles in the map and move around as you zoom in/out.

Any ideas? Thanks in advance.

Answer 1

After lots of debugging, I’ve finally found the issue.

The coordinate data was stored as a string of latitude/longitude data in the format 41.162822,-91.715893;41.161104,-91.715921;... etc. I was using JavaScript’s split() function twice to first get the coordinate pairs with split(";") and then to separate the latitude and longitude values with split(","). It turns out split() works even if the delimiter is at the end of the string and thus sticks an empty string into the resulting array. I guess early Internet Explorer versions still try to render the faulty LatLngs.

Moral of the story: check your data integrity.