DrawingManager.SetDrawingMode no longer works in 3.3.2 and newer #320

rungwiroon · Mar 21, 2024 · 2722b78 · 2722b78
1 parent a4bdff8
commit 2722b78
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 30 deletions.
diff --git a/GoogleMapsComponents/Maps/Drawing/DrawingManager.cs b/GoogleMapsComponents/Maps/Drawing/DrawingManager.cs
@@ -73,7 +73,7 @@ public Task SetDrawingMode(OverlayType? drawingMode)
     /// https://developers.google.com/maps/documentation/javascript/reference/drawing#DrawingManager.setMap
     /// </summary>
     /// <param name="map"></param>
-    public async Task SetMap(Map map)
+    public async Task SetMap(Map? map)
     {
         await _jsObjectRef.InvokeAsync(
             "setMap",

diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js
@@ -121,30 +121,29 @@
             }
         }
 
-        if (item2 === "polyline" && item2 !== null) {
-            if (item.startsWith("google.maps.drawing.OverlayType")) {
-                switch (item) {
-                    case "google.maps.drawing.OverlayType.CIRCLE":
-                        item2 = google.maps.drawing.OverlayType.CIRCLE;
-                        break;
-                    case "google.maps.drawing.OverlayType.MARKER":
-                        item2 = google.maps.drawing.OverlayType.MARKER;
-                        break;
-                    case "google.maps.drawing.OverlayType.POLYGON":
-                        item2 = google.maps.drawing.OverlayType.POLYGON;
-                        break;
-                    case "google.maps.drawing.OverlayType.POLYLINE":
-                        item2 = google.maps.drawing.OverlayType.POLYLINE;
-                        break;
-                    case "google.maps.drawing.OverlayType.RECTANGLE":
-                        item2 = google.maps.drawing.OverlayType.RECTANGLE;
-                        break;
-                    default:
-                }
-
-                return item2;
+        if (item !== null && item.startsWith("google.maps.drawing.OverlayType")) {
+            switch (item) {
+                case "google.maps.drawing.OverlayType.CIRCLE":
+                    item2 = google.maps.drawing.OverlayType.CIRCLE;
+                    break;
+                case "google.maps.drawing.OverlayType.MARKER":
+                    item2 = google.maps.drawing.OverlayType.MARKER;
+                    break;
+                case "google.maps.drawing.OverlayType.POLYGON":
+                    item2 = google.maps.drawing.OverlayType.POLYGON;
+                    break;
+                case "google.maps.drawing.OverlayType.POLYLINE":
+                    item2 = google.maps.drawing.OverlayType.POLYLINE;
+                    break;
+                case "google.maps.drawing.OverlayType.RECTANGLE":
+                    item2 = google.maps.drawing.OverlayType.RECTANGLE;
+                    break;
+                default:
             }
+
+            return item2;
         }
+
 
         if (typeof item2 === "object" && item2 !== null) {
             if ("guidString" in item2) {

diff --git a/ServerSideDemo/Pages/DrawingManagerPage.razor b/ServerSideDemo/Pages/DrawingManagerPage.razor
@@ -3,8 +3,9 @@
 
 <h1>Google Map Markers</h1>
 
-<GoogleMap @ref="@map1" Id="map1" Options="@mapOptions" OnAfterInit="@(async () => await OnAfterInitAsync())"></GoogleMap>
+<GoogleMap @ref="@_map" Id="map1" Options="@_mapOptions" OnAfterInit="@(async () => await OnAfterInitAsync())"></GoogleMap>
 <button @onclick="ChangeDrawingModeToLine">Change mode to line</button>
+<button @onclick="ChangeDrawingModeToPolygon">Change mode to polygon</button>
 <button @onclick="StopDrawingMode">Stop drawing mode</button>
 <button @onclick="SetMap">Set Map</button>
 @*<div id="map" @ref="@map1ElementRef" style="height: 450px"></div>*@
diff --git a/ServerSideDemo/Pages/DrawingManagerPage.razor.cs b/ServerSideDemo/Pages/DrawingManagerPage.razor.cs
@@ -13,14 +13,14 @@ public partial class DrawingManagerPage
     private DrawingManager _drawingManager;
     private DrawingManagerOptions _managerOptions;
     private PolygonOptions _polygonOptions;
-    private GoogleMap map1;
-    private MapOptions mapOptions;
+    private GoogleMap _map;
+    private MapOptions _mapOptions;
 
     [Inject]
     public IJSRuntime JsRuntime { get; set; }
     protected override void OnInitialized()
     {
-        mapOptions = new MapOptions()
+        _mapOptions = new MapOptions()
         {
             Zoom = 16,
             Center = new LatLngLiteral()
@@ -60,7 +60,7 @@ private async Task OnAfterInitAsync()
 
         _managerOptions = new DrawingManagerOptions()
         {
-            Map = map1.InteropObject,
+            Map = _map.InteropObject,
             PolygonOptions = _polygonOptions,
             //DrawingMode = OverlayType.Polygon,
             DrawingControl = true,
@@ -70,7 +70,7 @@ private async Task OnAfterInitAsync()
         _drawingManager = await DrawingManager.CreateAsync(JsRuntime, _managerOptions);
 
         //https://developers.google.com/maps/documentation/javascript/drawinglayer
-        await _drawingManager.AddOverlayCompleteListener(async (overComplete) =>
+        await _drawingManager.AddOverlayCompleteListener(async overComplete =>
         {
             if (overComplete.Type == OverlayType.Polygon)
             {
@@ -94,10 +94,13 @@ private async Task OnModeChangedClick()
         await JsRuntime.InvokeAsync<string>("console.log", message);
     }
 
+    private async Task ChangeDrawingModeToPolygon()
+    {
+        await _drawingManager.SetDrawingMode(OverlayType.Polygon);
+    }
     private async Task ChangeDrawingModeToLine()
     {
         await _drawingManager.SetDrawingMode(OverlayType.Polyline);
-
     }
 
     private async Task StopDrawingMode()