Bing Map: markers not showing, zoom/pan not functioning, width ignored

[Josh D Morales]

I was trying to use the Maps control to add a Bing map to a blazor server project I'm working on, and although I was able to render the bing map, none of the markers I added showed up. I also noticed I couldn't pan or zoom the camera; the buttons are there but they are not accessible, and there appears to be some kind of overlay that is blocking it.

I also noticed that I couldn't change the width of the map; it's fixed to 1280 and nothing I did changed it, including setting width in percent and pixels...

I thought perhaps it was my project interfering, maybe I had some weird css or js somewhere that was breaking it, so I added the map to a brand new default asp.net blazor server project, and I got the exact same results. This is using the sample from the docs to show markers on bing maps ( Bing Maps in Blazor Maps Component ), you can see from the attached screenshot the markers are missing, and the zoom buttons are shown but disabled. The width is fixed to that size, nothing I do will change it...

Can you tell me what I'm doing wrong?

Attachment: msedge_jvqQz0XXRi_f3ebac91.zip

[Josh D Morales]

If it helps, I'm uploading a copy of the new solution I created, tho I did remove the bing maps key from it so you'll  have to add a new one in the index page to run it. hopefully you see the same thing I do and can tell me what I'm doing wrong here, thanks again!

Attachment: maptest_7023e31e.zip

[Indumathi Ravi]

Hi Josh,

When we reviewed the provided sample, we noticed that the script file "syncfusion-blazor.min.js", which is required for client-side operations of the Blazor components, is not referred to in your application. So you're faced with the aforementioned problems. However, referencing the script file in the application's "Host.cshtml" page resolves the reported issues, and the Maps component works as expected. Please see the code for the same below.

Code Snippet:

[Host.cshtml]

<script src=”https://cdn.syncfusion.com/blazor/21.2.4/syncfusion-blazor.min.js” type="text/javascript"></script>

NOTE: The version of the “syncfusion-blazor.min.js” script file must be same as the version of the Blazor component package.

You can find the sample and video from the below link.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mapssample213240766

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/maps310470011

Please let us know if you need any further assistance

[Josh D Morales]

ugh, i knew it was something simple like that. I was about to complain that I followed the getting started examples exactly so i knew I did that, but looking at the code, I accidentally copied the CSS line twice from the setup instead of one CSS and one JS.

I'll take my dope slap now and get back to work, thanks for the help!!

[Indumathi Ravi]

Hi Josh,

Thank you for the update.

Please get back to us if you need any further assistance.