To much fillColor in google maps api polygon

Question

I have following issue with drawing a polygon with google maps api. It looks like that there is to much fillColor. The center of the following polygon is not supposed to have fillColor.

Is it google maps API or is it me who has a bug?

Example: http://jsfiddle.net/zCA2u/

$(function(){
var shape;

var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var coords = [
    new google.maps.LatLng(31.50362, -70.0488),
    new google.maps.LatLng(29.91685, -62.4023),
    new google.maps.LatLng(22.91792, -56.42578),
    new google.maps.LatLng(22.67484, -69.6972),
    new google.maps.LatLng(27.29368, -74.8828),
    new google.maps.LatLng(33.06392, -73.3007),
    new google.maps.LatLng(34.23451, -66.0058),
    new google.maps.LatLng(32.32427, -58.2714),
    new google.maps.LatLng(26.35249, -56.4257),
    new google.maps.LatLng(18.81271, -60.64453),
    new google.maps.LatLng(20.13847, -69.4335)
];

shape = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#ff0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    draggable: true,
    fillColor: '#ff0000',
    fillOpacity: 0.35
});

shape.setMap(map);

});

I have now tried the above in IE8 and it renders correct in IE8

Answer 1

If you want to make "holes" in polygons

1. they aren't supported by the drawing manager directly
2. you need to have separate paths (the polygon "paths" property takes an array)
3. the inner paths (the "holes") need to wind in the opposite direction from the inner path

simple example of a polygon with a hole (a donut)

fiddle with self intersection removed and hole

var coords = [
 [  new google.maps.LatLng(27.29368, -74.8828),
    new google.maps.LatLng(33.06392, -73.3007),
    new google.maps.LatLng(34.23451, -66.0058),
    new google.maps.LatLng(32.32427, -58.2714),
    new google.maps.LatLng(26.35249, -56.4257),
    new google.maps.LatLng(18.81271, -60.64453),
    new google.maps.LatLng(20.13847, -69.4335)
],
    [
    new google.maps.LatLng(21.534847,-63.28125),
    new google.maps.LatLng(30.221102,-59.677734), 
    new google.maps.LatLng(30.600094,-71.279297)
    ]
];