search

radzenhq / radzen-blazor

Radzen Blazor is a set of 90+ free native Blazor UI components packed with DataGrid, Scheduler, Charts and robust theming including Material design and FluentUI.
https://www.radzen.com
MIT License
3.52k stars 785 forks source link

Map markers aren't displayed correct #1624

Closed JohannesBauer97 closed 2 months ago

JohannesBauer97 commented 2 months ago

Describe the bug Map marker are not displayed correct - they are missing the typical icon: Screenshot 26 07 2024 um 11 46 05 AM

To Reproduce Steps to reproduce the behavior:

  1. Go to https://blazor.radzen.com/googlemap?theme=material3
  2. Toggle the "Show Marker for Madrid"

Expected behavior The map marker icon together with label for Madrid should be displayed. But only the label appears.

Desktop (please complete the following information):

Additional context Related community forum thread: https://forum.radzen.com/t/google-map-markers-not-working/17912

itsalfredakku commented 2 months ago

For last few days, facing same issue.

akorchev commented 2 months ago

Google changed their API so that's why markers no longer work. We will see how to enable them back. Feel free to use the JS API directly as a workaround.

itsalfredakku commented 2 months ago

Use HTML context or marker tag inside the RadzenGoogleMapMarker>Label

<svg width="24" height="32" viewBox="0 0 24 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.1003 0.0756569C5.57812 0.807465 1.96912 3.85979 0.561802 8.14431C0.180262 9.3077 0.0426568 10.0895 0.011383 11.3718C-0.0136361 12.2599 -0.00112654 12.604 0.0864402 13.0918C0.655624 16.2818 3.30139 21.0416 7.79857 26.9962C9.38728 29.0915 11.7516 32 11.8767 32C12.0018 32 14.5912 28.8101 16.0736 26.8398C20.5333 20.8978 23.104 16.2505 23.6669 13.0918C23.817 12.2537 23.7732 10.5587 23.5731 9.57665C22.6286 4.8543 19.0134 1.19526 14.291 0.188242C13.628 0.0443823 13.3528 0.0193636 12.0956 0.00685407C11.051 -0.0119102 10.5069 0.00685445 10.1003 0.0756569ZM13.0964 6.16155C15.3793 6.63065 17.2308 8.48207 17.6999 10.7651C18.3691 13.9925 16.2925 17.1512 13.0651 17.8142C12.2895 17.9768 11.0886 17.9455 10.3443 17.7391C8.18011 17.1512 6.49757 15.3748 6.05349 13.2044C5.36546 9.86437 7.59216 6.64942 11.001 6.08649C11.4451 6.01143 12.571 6.05522 13.0964 6.16155Z" fill="black"/>
</svg>
private string Label => "<svg width=\"24\" height=\"32\" viewBox=\"0 0 24 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.1003 0.0756569C5.57812 0.807465 1.96912 3.85979 0.561802 8.14431C0.180262 9.3077 0.0426568 10.0895 0.011383 11.3718C-0.0136361 12.2599 -0.00112654 12.604 0.0864402 13.0918C0.655624 16.2818 3.30139 21.0416 7.79857 26.9962C9.38728 29.0915 11.7516 32 11.8767 32C12.0018 32 14.5912 28.8101 16.0736 26.8398C20.5333 20.8978 23.104 16.2505 23.6669 13.0918C23.817 12.2537 23.7732 10.5587 23.5731 9.57665C22.6286 4.8543 19.0134 1.19526 14.291 0.188242C13.628 0.0443823 13.3528 0.0193636 12.0956 0.00685407C11.051 -0.0119102 10.5069 0.00685445 10.1003 0.0756569ZM13.0964 6.16155C15.3793 6.63065 17.2308 8.48207 17.6999 10.7651C18.3691 13.9925 16.2925 17.1512 13.0651 17.8142C12.2895 17.9768 11.0886 17.9455 10.3443 17.7391C8.18011 17.1512 6.49757 15.3748 6.05349 13.2044C5.36546 9.86437 7.59216 6.64942 11.001 6.08649C11.4451 6.01143 12.571 6.05522 13.0964 6.16155Z\" fill=\"black\"/>\n</svg>\n";
 <RadzenGoogleMapMarker Title="@Title" Label="@Label" Position="@Position" />

image