Add way to set AdvancedMarker properties #338

rungwiroon · Jul 1, 2024 · 7b9e160 · 7b9e160
1 parent f7d184a
commit 7b9e160
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 2 deletions.
diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj
@@ -15,7 +15,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>4.6.0</Version>
+		<Version>4.6.1</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>

diff --git a/GoogleMapsComponents/JsObjectRef.cs b/GoogleMapsComponents/JsObjectRef.cs
@@ -194,6 +194,15 @@ public Task AddMultipleListenersAsync(string eventName, Dictionary<Guid, object>
         );
     }
 
+    public Task InvokePropertyAsync(string functionName, params object?[] args)
+    {
+        return _jsRuntime.MyInvokeAsync(
+            "blazorGoogleMaps.objectManager.invokeProperty",
+            new object[] { _guid.ToString(), functionName }
+                .Concat(args).ToArray()
+        );
+    }
+
     public Task<T> InvokeAsync<T>(string functionName, params object?[] args)
     {
         return _jsRuntime.MyInvokeAsync<T>(

diff --git a/GoogleMapsComponents/Maps/AdvancedMarkerView.cs b/GoogleMapsComponents/Maps/AdvancedMarkerView.cs
@@ -29,6 +29,11 @@ public Task<int> GetZIndex()
     {
         return _jsObjectRef.InvokeAsync<int>("getZIndex");
     }
+
+    public async Task SetPosition(LatLngLiteral newPosition)
+    {
+        await _jsObjectRef.InvokePropertyAsync("position", newPosition);
+    }
 }
 
 [Obsolete("Use AdvancedMarkerElement")]

diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js
@@ -580,6 +580,32 @@
                 }
             },
 
+            invokeProperty: async function (args) {
+                let args2 = args.slice(2).map(arg => tryParseJson(arg));
+
+                let obj = mapObjects[args[0]];
+                let functionToInvoke = args[1];
+
+                if (Array.isArray(args2) && args2.length > 0) {
+                    var cloneArgs = args2;
+                    args2 = new Array();
+                    for (let i = 0, len = cloneArgs.length; i < len; i++) {
+                        var element = cloneArgs[i];
+                        if (element != null && element !== undefined && element.hasOwnProperty("lat") && element.hasOwnProperty("lng")) {
+                            args2.push(new google.maps.LatLng(element.lat, element.lng));
+                        } else {
+                            args2.push(element);
+                        }
+                    }
+                }
+
+                try {
+                    obj[functionToInvoke] = args2[0];
+                } catch (e) {
+                    console.log(e);
+                    console.log("\nfunctionToInvoke: " + functionToInvoke + "\nargs: " + args2 + "\n");
+                }
+            },
             invoke: async function (args) {
                 let args2 = args.slice(2).map(arg => tryParseJson(arg));
 

diff --git a/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor b/ServerSideDemo/Pages/MapAdvancedMarkerViewPage.razor
@@ -8,6 +8,7 @@
 <smallNotice: Available only in the v=beta channel.></smallNotice:>
 <GoogleMap @ref="@_map1" Id="map1" Options="@_mapOptions" OnAfterInit="OnAfterRenderAsync"></GoogleMap>
 <button @onclick="@AddMarker">Add marker</button>
+<button @onclick="@UpdatePosition">Recenter last</button>
 <button @onclick="@AddMarkerWithPinElement">Add marker with pin element</button>
 <br/>
 <p>Marker list</p>
@@ -249,11 +250,26 @@
             });
         }
 
-        await marker.AddListener<MouseEvent>("click",  e =>
+        _markers.Push(marker);
+
+        await marker.AddListener<MouseEvent>("gmp-click", e =>
         {
             _events.Add($"Clicked Pin Marker {e.LatLng.Lat} {e.LatLng.Lng}");
             StateHasChanged();
             e.Stop();
         });
     }
+
+    private async  Task UpdatePosition()
+    {
+        if (!_markers.Any())
+        {
+            return;
+        }
+
+        var lastMarker = _markers.Peek();
+        var mapCenter = await _map1.InteropObject.GetCenter();
+        await lastMarker.SetPosition(mapCenter);
+        await _bounds.Extend(mapCenter);
+    }
 }