Google Maps JS API Polygon Rendering Issue

Question

I'm creating a Google map with many polygons. The problem is that when my polygons render, they are inconsistently colored (different colors across the polygon body) and they don't render fully. Included are 2 images where you can see the amount of a given polygon that renders is not consistent.

The desired behavior is that the polygons render fully (there is not a straight line where the polygon is unrendered going down the middle of the polygon body) and the color of the polygon fill is consistent throughout the polygon.

I assume this is a tiling issue. Here is the code I'm using to govern the "getTile" and "releaseTile" logic for my custom map type:

GMICMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
    var c = Math.pow(2, zoom);
    var c = Math.pow(2, zoom);
    var tilex=coord.x,tiley=coord.y;
    if (imageWraps) {
      if (tilex<0) tilex=c+tilex%c;
      if (tilex>=c) tilex=tilex%c;
      if (tiley<0) tiley=c+tiley%c;
      if (tiley>=c) tiley=tiley%c;
    }
    else {
      if ((tilex<0)||(tilex>=c)||(tiley<0)||(tiley>=c)) {
        var blank = ownerDocument.createElement('DIV');
        blank.style.width = this.tileSize.width + 'px';
        blank.style.height = this.tileSize.height + 'px';
        return blank;
      }
    }
    var img = ownerDocument.createElement('IMG');
    var d = tilex;
    var e = tiley;
    var f = "t";
    for (var g = 0; g < zoom; g++) {
      c /= 2;
      if (e < c) {
          if (d < c) { f += "q" }
          else { f += "r"; d -= c }
      }
      else {
          if (d < c) { f += "t"; e -= c }
          else { f += "s"; d -= c; e -= c }
      }
}
GMICMapType.prototype.realeaseTile = function(tile) {
      var idx = this.Cache.indexOf(tile);
      if(idx!=-1) this.Cache.splice(idx, 1);
      tile=null;
}

Additionally, I'm using this code to push the polygons to the map:

            // Construct the sector outline.
        window[sectorName] = new google.maps.Polygon({
          name: sectorTitle,
          infoWindowPointX: sectorCenterPointX,
          infoWindowPointY: sectorCenterPointY,
          knownSystems: knownSystems,
          factionColor: factionColor,
          paths: sectorCoords,
          sectorDataNum: s,
          strokeColor: sectorColor,
          strokeOpacity: 1,
          strokeWeight: 0.8,
          zIndex: 1,
          fillColor: sectorColor,
          fillOpacity: 1
        });
        polygons.push(window[sectorName]);
        window[sectorName].setMap(map);

I'm guessing this is the code relevant to the issue, but I'm not sure what is causing the issue so I'm not sure what code to include. If I should include other sections of the code (or all of the code) please let me know.

Answer 1

I'm going to answer my own question for anyone who has a similar problem in the future to reference, since I have received no responses and devised a workaround to each problem.

1. Problem: Polygons not colored correctly.

Solution: I checked the fillColor attribute and discovered the value passed was incorrect. Passing the correct values fixed this problem.

2. Problem: Not all polygons rendered at all zoom levels.

Solution: My original source image was a 1000px X 1000px map with content drawn almost to 3 of the 4 edges (meaning very little empty space near the borders on 3 sides). I increased my source image to 2000px X 2000px and placed my original image in the center, meaning my map now has much more "empty" space where I am not rendering polygons near the edges. This has resulted in a smaller map, with lower fidelity in coordinates (1 X is now twice as far as it was before on the portions of the map with content), however the polygons are now only located near the center of the google map element. For some reason this means all polygons render at all zoom levels, which is the outcome I desired, at the expense of some fidelity and map image resolution.