Radzen Google Map Control get the center of the viewable are of the map

Radzen Studio Blazor WebAssembly
1

Hi:

I added a Radzen Google map in one of my Blazor pages.

I added a button, that when is clicked, I need to extract the current center of the viewable area of the map.

Right now, when I try to get the center (var center = mapObj.Center;), but I am getting the initial center position of the map, rather than the current center position after moving to another areas in the map.

Any idea how to achieve this.

Thanks

2

Indeed the Radzen GoogleMap component does not update the Center property. It is only used to set the initial center.

3

Hi. I spent an hour yesterday trying to do the same as the poster above, then came across this post. I know it’s late to the party but this may help someone else.

The property Center on the RadzenGoogleMap control provides a getter, which leads the developer to think that this property can be used at any point to get the center of the map. This isn’t the case and IMO it should be read only or something.

I got round this by importing a JS module in my map component and calling a method to attach a dragend event to the map, which then calls back to the component and allows an eventcallbak to be raised with the new coordinates.

Doing this allows to bind directly to the map center, which was one of my requirements. The code is show below, just in case it helps anyone else!

Call JS method to attach the event handler:

        protected async override Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
            if (firstRender)
            {
                // Attach the map move event which calls the method below when the map is moved
                var dotNetReference = DotNetObjectReference.Create(this);
                await module.InvokeVoidAsync("attachMapMoveEvent", dotNetReference, GoogleMapRef.UniqueID);
            }
        }

JS method which attaches the event handler, note there was an issue with the map not being ready / available, which is why the timer is used to fire every 100ms until the map is initialized. Seems to work fine but I’m sure a better solution could be found!:

export function attachMapMoveEvent(dotnetObjectReference, mapId) {
    var mapExistenceTimer = null;
    mapExistenceTimer = window.setInterval(function () {
        if (Radzen[mapId] != null) {
            var map = Radzen[mapId].instance;
            if (map != null) {
                window.clearInterval(mapExistenceTimer);
                google.maps.event.addListener(map, "dragend", function () {
                    var v = map.getCenter();
                    dotnetObjectReference.invokeMethodAsync("UpdatePosition", v);
                });
            }
        }
    }, 100);
}

finally, the c# callback method:

        [JSInvokable("UpdatePosition")]
        public async Task UpdatePosition(GoogleMapPosition pos)
        {
            Position = pos;
            await PositionChanged.InvokeAsync(pos);
        }