Rendered KML layer doesn't fills polygons

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)