Blazor WebAssembly中Google地图组件仅首次加载响应数据更新的问题排查与解决

Recently, I built a Blazor library that integrates Google Maps and Google Places Autocomplete, with the core functionality of navigating to a selected location once an autocomplete result is chosen. Testing in Blazor WebAssembly, I hit a frustrating quirk: the component works perfectly on initial page load, updating the map as expected when a place is selected. But after navigating away and coming back to the map page, even though the PlacesChanged method still triggers correctly, the map stops responding to state changes—StateHasChanged() seems to do nothing at all.

Code Implementation Details #

JavaScript/.NET Interop Class: GooglePlaceEventInfo #

This class handles interop between JavaScript and .NET, exposing two JS-invokable methods to handle place-related events:

internal class GooglePlaceEventInfo {
    private string _textBoxElementId;
    private Func<string, Task> _autocompleteInitializedCallback;
    private Func<GooglePlace, string, Task> _placeChangedCallback;

    public GooglePlaceEventInfo(string textBoxElementId, Func<string, Task> autocompleteInitializedCallback, Func<GooglePlace, string, Task> placeChangedCallback) {
        _textBoxElementId = textBoxElementId;
        _autocompleteInitializedCallback = autocompleteInitializedCallback;
        _placeChangedCallback = placeChangedCallback;
    }

    //Map events
    [JSInvokable("PlacesInitialized")]
    public async Task PlacesInitialized(string textBoxElementId) {
        if (_textBoxElementId != textBoxElementId) {
            throw new InvalidProgramException($"{nameof(PlacesInitialized)} method was called with invalid id container Div Id: {textBoxElementId}, expected Id is {_textBoxElementId}.");
        }
        if (_autocompleteInitializedCallback is not null) {
            await _autocompleteInitializedCallback.Invoke(textBoxElementId);
        }
    }

    [JSInvokable("PlacesChanged")]
    public async Task PlacesChanged(GooglePlace places, string textBoxElementId) {
        if (_textBoxElementId != textBoxElementId) {
            throw new InvalidProgramException($"{nameof(PlacesInitialized)} method was called with invalid id container Div Id: {textBoxElementId}, expected Id is {_textBoxElementId}.");
        }
        if (_placeChangedCallback is not null) {
            await _placeChangedCallback.Invoke(places, textBoxElementId);
        }
    }
}

Page-Level State Update Method #

On the page hosting the map component, I use _mapCenter and _zoomLevel fields to control the map's state. The PlaceChanged method handles the logic after a user selects a place:

private Task PlaceChanged(GooglePlace place, string textBoxElementId) {
    if (place != null) {
        PlaceMarkerOnMap(place);
        var position = new GeolocationData(place.Geometry.Location.Lat, place.Geometry.Location.Lng);
        _mapCenter = position;
        _zoomLevel = 14;
        StateHasChanged();
    }
    return Task.CompletedTask;
}

Razor Component Reference #

<GoogleMap @ref="_googleMap" Center="@_mapCenter" Zoom="@_zoomLevel" UsePlacesLibrary="true" ApiKey="@_googleMapsApiKey" />

Problem Behavior #

On initial page load, everything works as expected: selecting a place adds a marker to the map and pans/zooms to the correct location. But after navigating to another page and returning to the map page, even though PlacesChanged still fires (verified via debugging), the map component no longer updates. Calling StateHasChanged() doesn't trigger a re-render of the map.

Resolution #

I fixed the issue by refactoring all related logic into a standalone, dedicated component instead of keeping it directly in the host page. After this change, the component correctly responds to state changes even after multiple navigation cycles.

内容的提问来源于stack exchange，提问作者Adlorem