@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime
{ { "disableDoubleClickZoom", true } })
Zoom=@zoom Center=@(new GoogleMapPosition() { Lat = 42.6977, Lng = 23.3219 }) MapClick=@OnMapClick MarkerClick=@OnMarkerClick>
@if (showMadridMarker)
{
}
@code {
int zoom = 3;
bool showMadridMarker;
EventConsole console;
RadzenGoogleMap map;
void OnMapClick(GoogleMapClickEventArgs args)
{
console.Log($"Map clicked at Lat: {args.Position.Lat}, Lng: {args.Position.Lng}");
}
async Task OnMarkerClick(RadzenGoogleMapMarker marker)
{
var message = $"Custom information about {marker.Title}";
var code = $@"
var map = Radzen['{map.UniqueID}'].instance;
var marker = map.markers.find(m => m.title == '{marker.Title}');
if(window.infoWindow) {{window.infoWindow.close();}}
window.infoWindow = new google.maps.InfoWindow({{content: '{message}'}});
setTimeout(() => window.infoWindow.open(map, marker), 200);
";
await JSRuntime.InvokeVoidAsync("eval", code);
}
// Custom marker label
string Label => "\n";
}