Custom Google Map Markers with Modal forms

Hi,
We have a Radzen map with custom markers etc.


We would like to replace the Google Info windows with a Radzen modal form when the marker is clicked however because the markers are customized and based on google.maps.Marker the usual method does not work.
This is an extract of current code

 addMapMarker(map, markerProps) {       
        var marker = new google.maps.Marker({
            position: markerProps.position,
            map: map,
            draggable: false,
            optimized: false,
            title: markerProps.title
        });
        if (markerProps.icon) {
            marker.setIcon(markerProps.icon);
        }
        if (markerProps.content) {
            var information = new google.maps.InfoWindow({
                content: markerProps.content
            });
        }
        marker.addListener('click', function (event) {
            information.open(map, marker);
            // dialogService.open(MarkedClickedModalComponent, { parameters: {}, title: 'Marked Clicked Modal' });
            debugger;
            //  _this.zone.run(function () { return _this.click.next(); });
        });
        return marker;
    }

Can you offer any suggestions if this is possible and if so how?
Thanks

Hi @mumfie,

It isn't possible to open a Radzen Blazor dialog from JavaScript.

1 Like

Hi @korchev,
Actually, it's an Angular Modal in the same app but I assume the answers the same.
Thanks for your quick response.

Hi @mumfie,

My bad. I missed the topic category. The answer isn't the same for Angular - you can open a dialog to a page:

this.dialogService.open(EditOrderComponent, { parameters: {Id: event.Id}, title: 'Edit Order' });

The key is that the open method needs an existing Angular component - either a Radzen page or a custom one.

1 Like

Thanks @korchev,
I did initially try that but could not get it to work.
The code I posted above is in the xxx.component.ts file. I have now added dialogService as a parameter to addMapMarker( and it appears to be working. (only minimal testing done to date).

Hi @mumfie ,

May I know how you customize the map markers (display a specific image as the map marker instead of the default one)?

I am trying to customize the appearance of map markers by C# code but I have not found any guidelines for that :frowning:

From what I recall we implemented custom icons via javascript Api not C#
see here

1 Like

We used the Google Javascript API as well.

@mumfie , @mrentier: thank you for your info! I want to avoid using JS (because I know only C#) but it seems that my dream is now broken :sweat_smile: