Google Map with InfoWindows attached to Markers

Radzen Studio Blazor WebAssembly
1

Hi

I've created a GoogleMap and in code added RadzenGoogleMapMakers and attached to the GoogleMap Data property. The markers display on the maps but I was wondering how I go about adding InfoWindows to the Markers.

Thank you

2

Hi @kirank,

Showing info windows is a bit tricky and you will need to interact directly with the JS Google Map API. For example:

    async Task OnMarkerClick(RadzenGoogleMapMarker marker)
    {
        var message = $"Custom information about <b>{marker.Title}</b>";

        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);
    }

UPDATE: I've added this to our demo.

3

Thank you @enchev

The RadzenGoogleMapMarker has an event MouseEnter which I want to try this code on but I'm not sure how to attach to that event to the marker in code behind. Any thing I put after MouseEnter = in the code behind has a compile error with message "CS0428 Cannot convert group 'MethodName' to non-delegate type EventCallback. Did you intend to invoke the method?"

4

Even if I use the MouseEnter in markup, nothing seems to fire. Am I missing something

5

MouseEnter/MouseLeave will not work in this case. These events are looking for Blazor element reference while Google Map markers are not. On the other hand there are no such events in the Google API as well, there are mouseover and mouseout:

You can check the demo I've updated yesterday to know how to get the map JS instance, desired marker and attach desired event according to Google documentation.

6

Thank you @enchev

Appreciate your input. I've got the InfoWindow working based on this.

7

How do you did it ? Do you have some code ?