Rendered KML layer doesn't fills polygons - google-maps

Question

I'm trying to render some simple kml layers on a Gmaps API project, but I'm finding that, despite anything I try, polygons doesn't fill.
I load a KML layer with this code:
var kmlLayerCenter = new google.maps.KmlLayer('<kmlFileRoute>', {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
And this is the KML code:
<?xml version="1.0" encoding="utf-8" ?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document id="root_doc">
<Folder>
<name>Distrito_Centro_KML</name>
<Placemark>
<Style>
<LineStyle>
<color>ff0000ff</color>
</LineStyle>
<PolyStyle>
<fill>1</fill>
<color>ff0000ff</color>
<outline>1</outline>
</PolyStyle>
</Style>
<Polygon>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-5.67256283331951,43.5397440536399
----- LOTS OF POINTS ------
-5.67256283331951,43.5397440536399
</coordinates>
</LinearRing>
</outerBoundaryIs>
</Polygon>
</Placemark>
</Folder>
</Document>
</kml>
The polygon renders ok with red border, but there isn't any fill color. I tried to touch values here and there inside the KML, but to no success.
Any help will be appreciated.

Answer 1

Ok, Incredible but true... it seems that points on KML layers should be ordered counter-clockwise to allow Gmaps API to render fill colors.
I don't understand completely why is this, but it seems to work fine.
I found info about the solution here, although geocodezip answer was more or less on the same direction it wasn't until I reverse every point in the coordinates string that fill color appeared.

Answer 2

Looks like the Google Maps KML renderer is now sensitive to winding direction (which you didn't provide in your question).
This works:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122b.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.9439,45.254695
-5.408402,45.284535
-5.67256283331951,44.5397440536399
</coordinates>
This doesn't:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {
lat: 24.886,
lng: -70.268
},
mapTypeId: 'terrain'
});
var kmlLayerCenter = new google.maps.KmlLayer({
url: 'http://www.geocodezip.com/geoxml3_test/kml/SO_20181122.kml',
suppressInfoWindows: true,
// preserveViewport: true,
map: map
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<coordinates>
-5.67256283331951,44.5397440536399
-5.408402,45.284535
-5.9439,45.254695
-5.67256283331951,44.5397440536399
</coordinates>
The only difference is winding direction (the order of the middle two points)