Google Maps Android API v2 polygon fill issue with custom shapes

[sarahj]

I’m working with Google Maps Android API v2 and having trouble with polygon filling. When I create a simple rectangular polygon, everything works perfectly and the shape fills as expected. However, when I try to create more complex shapes like a triangular arrow pointing downward, only the outline appears but the interior doesn’t get filled with color.

My app lets users tap on the map to create custom polygon points. I’ve noticed that certain point combinations work fine while others don’t fill properly even though the stroke lines appear correctly.

Here’s my test code that demonstrates the problem:

private void createPolygonTest() {
    PolygonOptions shapeOptions = new PolygonOptions();
    shapeOptions.add(new LatLng(45.12345678901234,-94.56789012345678)); // problematic coordinate
    //shapeOptions.add(new LatLng(45.14567890123456,-94.55678901234567)); // working coordinate
    shapeOptions.add(new LatLng(45.11234567890123,-94.45678901234567));
    shapeOptions.add(new LatLng(45.09876543210987,-94.48901234567890));
    shapeOptions.add(new LatLng(45.13456789012345,-94.52345678901234));

    shapeOptions.fillColor(0x50008800);
    shapeOptions.strokeWidth(3);

    googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(45.12345678901234, -94.56789012345678), 12));
    overlayList.add(googleMap.addPolygon(shapeOptions));
}

If I use the commented coordinate instead, the polygon fills correctly. Has anyone encountered this issue before? What could cause certain point arrangements to prevent proper filling?

[AdventurousHiker17]

yep, could be the winding order. try reversing the points, it often solves the fill issue. also, make sure points ain’t overlapping or crossing each other, that can mess up the fill too.

[Dave_17Sketch]

You’ve got a self-intersection issue with your polygon coordinates. When you connect points in certain orders, the polygon crosses over itself and confuses the fill algorithm. The Maps API can’t figure out what’s ‘inside’ vs ‘outside’ when paths intersect. I ran into this same thing building a property mapping feature. The fix was validating the coordinate sequence before creating the polygon. Your points need to form a simple polygon without internal crossings. Try plotting those coordinates on paper first - you’ll see the actual shape being created. What looks like logical point sequencing often creates an hourglass or bow-tie pattern that breaks the fill. Use different point ordering or add intermediate coordinates to avoid the self-intersection.

[HappyDancer99]

Had the same frustrating issue with polygon rendering on a mapping project last year. Your coordinate precision is probably breaking Google Maps’ rendering engine. Those 14-decimal-place coordinates you’re using? Way overkill and they create floating point errors that screw up the fill algorithm. Round them down to 6-8 decimals max - you’ll still get meter-level accuracy without the headaches. Also, double-check your polygon points actually form the shape you want. Log the bounds or throw them into a coordinate plotting tool. I’ve seen ‘simple’ arrow shapes turn into weird geometry because of precision issues.