BlazorGoogleMaps - Get a location from user

Question

With this component, how can I let the user to select a location (a point)?

I have a form that user needs to feel the address and also I need to send the latitude and longitude to the server.

This is what I have so far and it just shows a map that I can navigate:

<GoogleMap Options="mapOptions" />

@code {
    MapOptions mapOptions = new MapOptions()
        {
            Zoom = 13,
            Center = new LatLngLiteral()
            {
                Lat = ...,
                Lng = ...
            },
            MapTypeId = MapTypeId.Roadmap
        };
}

Answer 1

You can use the MapEventList component:

<GoogleMap @ref="@map1" Id="map1" Options="@mapOptions" OnAfterInit="@(async () => await OnAfterInitAsync())">
</GoogleMap>

<input type="checkbox" bind="@DisablePoiInfoWindow" />Disable POI's popup info window
<br>

<MapEventList @ref="@eventList" Events="@_events"></MapEventList>

@code {
    private GoogleMap map1;
    private MapEventList eventList;

    private MapOptions mapOptions;

    private List<String> _events = new List<String>();

    private bool DisablePoiInfoWindow { get; set; } = false;

    protected override void OnInitialized()
    {
        mapOptions = new MapOptions()
        {
            Zoom = 13,
            Center = new LatLngLiteral()
            {
                Lat = 13.505892,
                Lng = 100.8162
            },
            MapTypeId = MapTypeId.Roadmap
        };
    }

    private async Task OnAfterInitAsync()
    {
        await map1.InteropObject.AddListener<MouseEvent>("click", async (e) => await OnClick(e));  
    }

    private async Task OnClick(MouseEvent e)
    {
        _events.Insert(0, $"Click {e.LatLng}.");
        _events = _events.Take(100).ToList();

        StateHasChanged();

        if (DisablePoiInfoWindow)
        {
            await e.Stop();
        }
    }
}

Check the demo https://github.com/rungwiroon/BlazorGoogleMaps/blob/master/ClientSideDemo/Pages/MapEvents.razor