[google_maps_flutter_web] Hole Direction in Polygons

packages/google_maps_flutter/google_maps_flutter/example/lib/place_polygon.dart

@@ -275,17 +275,17 @@ class PlacePolygonBodyState extends State<PlacePolygonBody> {
     final double offset = polygonOffsets[selectedPolygon];
 
     final List<LatLng> hole1 = <LatLng>[];
-    hole1.add(_createLatLng(51.8395 + offset, -3.8814));
-    hole1.add(_createLatLng(52.0234 + offset, -3.9914));
-    hole1.add(_createLatLng(52.1351 + offset, -4.4435));
     hole1.add(_createLatLng(52.0231 + offset, -4.5829));
+    hole1.add(_createLatLng(52.1351 + offset, -4.4435));
+    hole1.add(_createLatLng(52.0234 + offset, -3.9914));
+    hole1.add(_createLatLng(51.8395 + offset, -3.8814));
     holes.add(hole1);
 
     final List<LatLng> hole2 = <LatLng>[];
-    hole2.add(_createLatLng(52.2395 + offset, -3.6814));
-    hole2.add(_createLatLng(52.4234 + offset, -3.7914));
-    hole2.add(_createLatLng(52.5351 + offset, -4.2435));
     hole2.add(_createLatLng(52.4231 + offset, -4.3829));
+    hole2.add(_createLatLng(52.5351 + offset, -4.2435));
+    hole2.add(_createLatLng(52.4234 + offset, -3.7914));
+    hole2.add(_createLatLng(52.2395 + offset, -3.6814));
     holes.add(hole2);
 
     return holes;

packages/google_maps_flutter/google_maps_flutter_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.0+11
+
+* Add warning if a hole is the same direction as the polygon [Issue](https://github.com/flutter/flutter/issues/74096)
+
 ## 0.1.0+10
 
 * Update `package:google_maps_flutter_platform_interface` to `^1.1.0`.

packages/google_maps_flutter/google_maps_flutter_web/lib/src/convert.dart

@@ -482,9 +482,15 @@ gmaps.PolygonOptions _polygonOptionsFromPolygon(
   polygon.points.forEach((point) {
     path.add(_latLngToGmLatLng(point));
   });
+  final polygonDirection = _isPolygonClockwise(path);
   List<List<gmaps.LatLng>> paths = [path];
   polygon.holes?.forEach((hole) {
-    paths.add(hole.map((point) => _latLngToGmLatLng(point)).toList());
+    final holePath = hole.map((point) => _latLngToGmLatLng(point)).toList();
+    if (_isPolygonClockwise(holePath) == polygonDirection) {
+      print(
+          'Holepath is the same direction as polygon. In order to be displayed properly you should reverse the hole Path. More Info: https://developers.google.com/maps/documentation/javascript/examples/polygon-hole');
+    }
+    paths.add(holePath);
   });
   return gmaps.PolygonOptions()
     ..paths = paths
@@ -498,6 +504,20 @@ gmaps.PolygonOptions _polygonOptionsFromPolygon(
     ..geodesic = polygon.geodesic;
 }
 
+/// Calculates the direction of a given Polygon
+/// based on: https://stackoverflow.com/a/1165943
+///
+/// returns [true] if clockwise [false] if counterclockwise
+bool _isPolygonClockwise(List<gmaps.LatLng> path) {
+  var direction = 0.0;
+  for (var i = 0; i < path.length; i++) {
+    direction = direction +
+        ((path[(i + 1) % path.length].lat - path[i].lat) *
+            (path[(i + 1) % path.length].lng + path[i].lng));
+  }
+  return direction >= 0;
+}
+
 gmaps.PolylineOptions _polylineOptionsFromPolyline(
     gmaps.GMap googleMap, Polyline polyline) {
   List<gmaps.LatLng> paths = [];

packages/google_maps_flutter/google_maps_flutter_web/pubspec.yaml

@@ -1,7 +1,7 @@
 name: google_maps_flutter_web
 description: Web platform implementation of google_maps_flutter
 homepage: https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter
-version: 0.1.0+10
+version: 0.1.0+11
 
 flutter:
   plugin: