Roughly a week ago, I ran into a problem: on a custom google-powered map, my Polygons would not show up, while Markers for the same coordinates are totally ok. Despite my efforts with the Google Maps API, it seems I cannot find why.

Here is a link to a screenshot of the map. Purple arrows and numbers are my addition, they show:

  1. The google.maps.Marker I could place at the edges of my "region".
  2. The artifact generated by the google.maps.Polygon code. It is red as expected, but completely out of place and weirdly flat.

Here is the part of the code where Markers and Polygons are generated: 

var regionData = tecMap.regions[r];
var regionMapMarkers = new google.maps.MVCArray();

for (c in regionData.coords) {
    var point = projection.worldToMap(regionData.coords[c]);
    debugRegionPoints.push(point);
    var thisLatLng = projection.fromPointToLatLng(point);
    debugRegionLatLngs.push(thisLatLng);
    regionMapMarkers.push(thisLatLng);
}

regionMapMarkers.forEach(function(latLng, m){
    var marker = new google.maps.Marker({       
        position: latLng,
        map: map, 
        title: '',
        optimized: false
    });
    regionCorners.push(marker);
});

var paths = new google.maps.MVCArray();
paths.push(regionMapMarkers);

var region = new google.maps.Polygon({
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    paths: paths,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2     
});
regionPolys.push(region);

If you're wondering about the array of arrays, it's all on par with the Google Maps Javascript API.

If you want to have a look at the map and related scripts, you can javascript google-maps google-maps-api-3 polygon projection

Edit
Report