BlazorGoogleMaps - Get a location from user - google-maps

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