.NET MAUI Maps: A First Look - Pins, Polygons and more!
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- It's finally here! .NET MAUI Maps is making its way into the .NET MAUI codebase so let's have a first look at what it can do. Can you keep a secret? I will also tell you how to get hold of the first bits to try .NET MAUI Maps out yourself... Today!
💝 Join this channel to get access to perks:
th-cam.com/channels/ral.html...
Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
🛑 Don't forget to subscribe to my channel for more cool content: th-cam.com/users/GeraldVerslui...
🐦 Follow me on Twitter: / jfversluis
🤝 Join the Discord server: / discord
🔗 Links
Sample Code Repo: github.com/jfversluis/MauiMap...
.NET MAUI Repo: github.com/dotnet/maui
.NET MAUI Docs: docs.microsoft.com/dotnet/com...
⏱ Timestamps
00:00 - .NET MAUI Maps
00:23 - What happened to Maps?
01:19 - Breaking Changes
02:27 - Setting up .NET MAUI Maps
05:46 - Explore Maps APIs
11:20 - Get Started Yourself Today 🤫
14:18 - What Happened to Windows?!
🎥 Video edited with Filmora
🙋♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#dotnetmaui #maps #googlemaps #dotnet6 #maui - วิทยาศาสตร์และเทคโนโลยี
Right after posting this video I tried a new version of the NuGets and they might already not be compatible anymore with the current .NET MAUI version 😅 so the fun might be over already. Sorry! Then you'll have to wait until .NET 7.
Here is some .NET MAUI videos to keep you busy in the mean time: th-cam.com/video/ostgj2xB_ok/w-d-xo.html
Thank you for the video. Do you also have one for rendering a custom pin based on a view in ios/apple maps. I have one working for android but can't seem to get ios working.
Super excited about this. Really want the web-based Bing implementation for WinUI, so that we can have something as soon as possible. Since it is already built, it sounds like releasing it to a community toolkit is a great idea.
I am very happy to see the inclusion of a map control. I also use the custom pins, info window when custom pins is tapped. In addition when the map is long tapped I add that GPS point. This control is the single remaining challenge I have to permit me to move my app from Xamarin Forms to Maui.
Yup custom pins are great as well...
Thanks Dave! Make sure to see if there are feature requests for it and if not open them. And either way I'll try to do videos on how to do that :)
I would like to see a custom pins video. Also, can a subclass of Pin be added to the map?
Omg, finally! Thank you very much for it! I would also love to see windows support
We’re working on something! Not sure what it will look like though
A video or short example to show this as MVVM would be very cool!
Really happy to see new videos on MAUI tech 👍👍👍💪
More to come!
Yes i am interested in the Windows version too, because, i find it more easier to layout in Xaml then in html + blazor. On blazor my experience is you need so much more code behind stuff to achieve things.
Thanks!
Thank you for all the videos you make to teach us how to develop MAUI apps .
I have a question: How to change the default sizes (with ,Hight , max Height, minimum height, etc) for the Windows Platform in MAUI ?
How do we add pins using the MVVM pattern? Is there a way to create a list of locations in xaml and bind to a source in the viewmodel?
amazing gerald thank you so much 😍
You’re very welcome!
@gerald Great video. Thanks a lot. If we click on a pin that was added, can we get a callback for that ?
Great video! Keep up the good work!
Thanks Kay! Will do!
Is it possible to highlight different parts on a static image like an image map with image sliced to different parts a and highlight each part dynamically in windows using Maui. Example - highlight different states/ region in an image of a country?
👍 Good one. waited for maps
Just a little longer and it will be there! Anything else you’d like to see a video about with maps?
u rock!!! i love this channel 🙌
Thank you so much! Tell your friends!
It's getting really good! Congratulations. I think a video about custom pins would be cool. Is it also possible to customize the location information by clicking on the pin? Thank you for everything
Thank you! I don’t think we have some kind of info window built in right now. But that is definitely a good one to think about!
TNice tutorials was great! the way you explain tNice tutorialngs and repeating it really helps. thanks for the tutorial!
Glad it was helpful!
Very nice @Gerald keep it up
Thank you, will do!
💓💖. I was dying for this.
Just in time then! Hope you’re still alive!
@@jfversluis yeah I'm breathing
Thank you. Is it possible to change the color of the pin?
thanks for the video, the map control work with maui blazor hybrid ?
Hi Gerald, making the same app with Blazor and Maui, how can we do?
An example would be greatly appreciated :)
Is there any way to use binding context on the pin?
Any idea if/when Maui will incorporate 'AnimateCamera'? I would love to be able to have the map stay oriented to the users current heading, but I can't find any way to do this.
Great Video Gerald 🙂. Thanks for that. Can you please tech, how can we navigate from one location to another location(live path navigation)?
Personally I would let apps do that that can probably do it better. With Essentials you can open the default maps app for the device in navigation mode.
One of the main missing features of the old Xamarin.Forms maps was MVVM support. Supporting ICommand for the events and having a SelectedPin bindable property would be a great start towards that. Having something like an overridable PinTemplate which could be hooked to a DataTemplateSelector, for changing the appearance of the pins, would be extra ideal. I was able to use XAML Shapes, with the path data grabbed from free SVGs, as the basis for pins with the Xamarin.Forms.GoogleMaps nuget package... driven entirely by DataTemplateSelectors in the common code.
Cant this be accomplished by using CommunityToolkit.Mvvm ? Haven't used it myself but, thought it may be helpful
@@bbqchickenrobot3 I accomplished this by creating custom platform-agnostic controls that inherit from the MAUI platform-agnostic map and pin. I will post a link to my code.
@@EmbraceUnity87 Hey man, my app needs some custom pin functionality and I saw your comment saying you've already implemented something similar. Could you share the code if possible? Thanks
This is so EPIC. I just start a new project a this information is so usefull
Great to hear! Let me know if you need anything!
Thank you very much for these excellents videos !! Have you any news about a Wndows version of a mapping tool ?
Thank you! We’re working on it for the .NET MAUI Community Toolkit
I would be highly interested in a video about creating polygons on the map. Need this for a game I'm working on
That's cool, I'll definitely put it on my list. It shouldn't be different than how it works on Xamarin.Forms Maps. So if you need it before my video, look into that! What kind of game are you building?!
You said there is an option for custom pins. How? Maps look amazing. great performance
Great video. Could you do a tutorial on AppActions in the future?
Windows vesion of the map - our team is definitely interested because if you run 1 app on Windows and Android, it should work everywhere and that is our scenario.
Thanks! I agree, unfortunately there is no WinUI map component though, and looks like they’re not planning on adding one soon. But we’re looking on finding some solution for you :)
I had to finish a Xamarin Forms app yesterday for my education where I used both Location and Position structs from .Essentials and .Maps.
It was really annoying that I could not access the user location from the Map itself so this seems like a nice evolution of the control. Is there MapSpan databinding now?
Not much has changed from what was in Forms except for what I mentioned. But we’re open to ideas!
Is there a possibility for Tag property on Pin to assign custom object as a value which can be then retrieved back from the Pin? This is needed
You can always create your own inherited version of Pin :) I don’t think we have anything for that right now
Great Video! Maybe one video about Authorization and authentication with facebook and gmail would be useful too.
I’m not great with auth, so not likely soon but who knows :)
Thanks!!!!
You bet!
Thanks Gerald , great video. Do you know, if there is for Maui Map an MVVM support planned?
What kind of MVVM support are you looking for?
@@jfversluis Drawing a route, setting pins and polygons
Thank you Gerald once again for your helpful videos. Is it possible to have google maps in Iphone? Maybe using an external library?
You’re going to have to find a plug-in for that. It’s not going to be possible with the official Maps
@@jfversluis Thank you. PLease keep us inform if you find something!
I followed the steps to create an API key in the Google API console with no restrictions. It only displays a blank map even with the proper key embedded. Has anyone else found this to be an issue?
same to me. have you found the fix?
Looking good. thanks for sharing - can it also show routes between 2 locations?
If you mean turn-by-turn navigation then no. I guess you can implement showing something like that but you don’t have the 3D view.
@@jfversluis OK thanks for that. wasn't sure how much functionality it has.
Cool video, thanks. Would I be able to find things like nearest airport from a location on the maps? Is there an API or feature?
I think you can do this with Google places API
Indeed, you will need to use another API for that. This is just showing a map
Great video man, like always, now I can do my post XD hahahahahahaha
Haha absolutely! Looking forward to it! Thanks my friend!
Is there a way to pin my localization together with a list of other places, like restaurants or stores? Like Google Maps does when you look for something
Sure, but that is something you’ll need to implement
thanks
Thanks for watching!
Thanks Gerald , but I have a question, how can I change pin 📍 image for android and iOS in xamarin forms?
This is probably helpful: docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map-pin
can you please support custom pins ( label, position, color, address, ImageSource, and infowindow , etc.) themes, ?
Not in the first version, but hoping we can add more features later! Of course anything is customizable through custom handlers and such.
Is it possible to resize text to fit a label, even after rotating your phone?
(I know this has nothing to do with the video, but im trying to do that)
I would think it should do that automatically.
@@jfversluis I guess I messed something up then
Would you please show us how to use BLE in .NET MAUI? Because this is the only feature that is not implemented in MAUI.
I would like that too
Can we restrict keyboard entry to one language only like in English and user can't type in any other language in xamarin
Not that I know of
Please tell me, that it is easier now to center rthe map around the users position and keep it centered.
Don’t think we made any improvements there yet, but I’d love to hear what you’re struggling with and see if we can make it better
@@jfversluis It is really annoying in my opinion that you have the native functionality to display where you are ad that this gets updated everytime you move. But that there is no IsCentered option or anythign which keeps you cnetered around this point. Even though you already have a functionalitsy which gets your coordinatesy you have to write your own paltform specific thing that gets you your coordinates and set them manually on the map. This seems really unintuitive for me. If jhere is already something which gets my coordinates and displays me on the map why can't i just adress this to center the map around it? Isn't this kind of the standard functionality you want from a map to keep it centered around your position while moving?
I wait your all videos related to .MAUI
😄 thank you!
Great Video, thank you. Is it possible to set the api-key at runtime? Normaly each of our customer has his own api-key if he want to use such a feature. It would be set with the login of the user.
I would think so normally. But it might be harder now because UseMauiMaps throws an exception if it doesn’t find the key. I guess one way around that is to add a dummy key in the manifest and find a way to set the API key at runtime
@@jfversluis does it also test whether the key is valid, or can we just use any value?
This just checks if a value is present. If the api key is invalid no map is shown and an error appears in the application output.
Ok, i Keeper that Info in the back of my mind. Iam gonna wait for the net7 Release an then play with it a little. Thanks
Hi, I'm using MAUI Maps, Currently the existing google API, Key is working on lower version of Andriod, but the same API Key is showing blank map on Android 12 and 13, Any idea how to solve this?
Hi, how can I display a route between 2 locations on the Map?
You probably want to use polylines: learn.microsoft.com/dotnet/maui/user-interface/controls/map?view=net-maui-7.0#polygons-polylines-and-circles
Does anyone know hot to visulize a heatmap on an ArcGis map with .NET MAUI?
Great tutorial, Gerald. I'm getting this error:
System.MissingMethodException
Message=Method not found: bool Microsoft.Maui.Devices.Sensors.Location.op_Inequality(Microsoft.Maui.Devices.Sensors.Location,Microsoft.Maui.Devices.Sensors.Location)
Yeah soon after I released the video that happened with the NuGets on Android at least. I think iOS is still working. Means that the NuGet is now incompatible with the current public .NET MAUI version so either download all the code from main and run with that, but probably better to wait until we publish something on NuGet
The video is great. Can you make a video for 3D model integration with MAUI?
Or can I embed Unity in MAUI?
I have 0 experience with that, so probably not anytime soon. Sorry 😅
@@jfversluis No probem. I hope you want to try it one day 😂😂😂
What I really need is access to bluetooth events from MAUI... with the latest version I still have to code that separately for each platform!!
.NET MAUI is primarily a UI framework, so that’s where the focus is.
@@jfversluis well if you can get location, it would be good as well to scan or react to bt devices
Bluetooth is a lot harder than locations. If you know a bit about the history then you know that the locations came in with Essentials. However, like unsaid, .NET MAUI is still primarily a UI framework and there is still a lot of work to be done there. Not saying it’s never going to happen, but I don’t think anytime soon and there are great plugins that can help you with this.
@@jfversluis ok... I guess I'll have to stick to 3rd parties until then... ;)
Is there any way to display route from point A to point B on this map?
You could with polylines I guess.
@@jfversluis Yeah, that makes sence, thank you
I am working with .NET MAUI in .NET 7 Release Candidate 1 and have converted my Xamarin map code to this latest Map. It works great, except for Windows, or course. So, yes, I would certainly like the Windows version of my app to work the same as iPhone, Android, and MacCatalyst. Another thing I am trying to do is recenter the map without changing the MapSpan. In other words, if the user has zoomed in I would like to maintain that zoom even when the map is recentered. There does not seem to be an option for that, although I am thinking about detecting the click and keeping track of the zoom so that I can restore it when I recenter. Please let me know if there is a simpler way to do this. Thanks!
Hey there! We're working on the Maps for Windows right now in the .NET MAUI Community Toolkit.
As for the other thing, that might be a nice addition that we can add!
@@jfversluis thanks Gerald! I guess I’ll wait for the recenter feature then. It should be very easy to add.
I believe if MAUI supports Windows, its individual components/extensions should as well. What use is having a component that only works on a subset of devices? I wouldn't call it complete without windows support...
The problem is that .NET MAUI only exists at the grace of what we’re building on top of. Android has a component that provides a map, iOS has a component that provides a map, WinUI does not.
Then maybe WinUI should 😉 would be beneficial for everyone around the table... I mean if MS ever want their "desktop apps" to get off the ground and compete with PWAs they should provide enough features for it.
@@stijnvanhoecke4753 tell that to them! It was on the roadmap but they took it off. So apparently not a lot of people are asking for it 🤷♂️
is there any way to run google map on android and ios ?
No and that probably won’t be supported. If you need that, a plug-in needs to be created.
How about .net maui push notifications? I think that is important feature as well.
What about it?
When i try to insert map in my .net maui project following this good video, i have this exception:
Microsoft.Maui.Platform.HandlerNotFoundException: 'Handler not found for view Microsoft.Maui.Controls.Maps.Map.'
Can someone help me to resolve ?
Best Regards.
Raffo
Make sure that you add the initialization line in your MauiProgram.cs
Is it free to use? Don't you have to pay for it after "x" map renders?
Not for iOS, I’m not sure how the Android/Google Maps pricing works tbh
is there a way to use the map data offline?
Unfortunately not!
@@jfversluis Hello Gerald, like your informative and helpful videos a lot. Thanks for immediate reply. Keep on your great work! Any suggestions of (xamarin/3rd party) controls capable of offline maps? I need it for out in the wilderness without mobile data available
Try MapsUI: github.com/Mapsui/Mapsui
And thank you Markus!
Can it run on Windows Machine?
If you install the .NET MAUI Community Toolkit, yes
Maps Control for Windows with .NET MAUI and Bing Maps
th-cam.com/video/G3fIVJGabUQ/w-d-xo.html
For the life of me i can't seem to find the nuget packages, Can u please send me the ones u used in this project. or just send me the azure dev link
my project have 1000 pins, I am using your solution but it loads too slow, even the phone freezes. Any idea how to solve this?
Only show pins that are actually in view and group them when zoomed out
@@jfversluis is there any example for it? It worked well with Xamarin but when change to MAUI, it is too slow
@@jfversluis Is there an event when it be zoom out?
Didn‘t you already use the default map in Episode 6 of the crash course?
Not that I know of. Do you mean the little map that is in the Android emulator settings?
@@jfversluis in the find closest monkey part you are using a map (even though the map did not completely load, it opened the platform specific default map)
@@oj3486 Ooh gotcha! Yeah so that opens the default maps application on the device. .NET MAUI Maps can show a map inside of your own app. That's the difference :)
@@jfversluis Ah okay. Thanks for clarifying :)
@@jfversluis Thanks for clarifying this, I was going to ask the same question as I just done James course on the monkey finder, though the maps didn't load properly.
Is it ok to use it in production?
Not yet! Will be released with .NET 7 as stable
@@jfversluis Thanks for the info.
Yes, yes, windows version please
We're working on it here: github.com/CommunityToolkit/Maui/pull/604
Hi Gerald, I cloned your repo and when I run the app, I'm facing this issue
Microsoft.Maui.Platform.HandlerNotFoundException Message=Handler not found for view Microsoft.Maui.Controls.Maps.Map.
I'm using VS 2022 17.4. Any help on this please?
Try upgrading the plug-in. The Maps NuGet is released officially by now so install it from NuGet.
Also, doesn’t work on Windows!
@@jfversluis yeah I did update from Nugent itself and I'm running on Android. The map control is showing blank
For Android you need an API key as well. And add UseMauiMaps in your MauiProgram
@@jfversluis yes Gerald, I used an API key and configured .UseMauiMaps() in MauiProgram too. But maps are not loading
Custom pins video.
No please?
@@jfversluis +1 to please make a video on custom pins ^_^
Video on in app update in Xamarin please!
I’m pretty sure I’m not going to make that one, sorry
@@jfversluis thanks anyway!
Is maps still not natively available in Maui? Whats going on. Maui is a good fiew years old now and Maps I would wager are an essential developer feature.
It is available?
@@jfversluis Can you repost the details or do an updated tutorial please because your previous ones don't work. I followed the tutorials to the letter and got this 'Unable to convert Microsoft.Maui.Controls.Maps.Map to Android.Views.View' :(
@@davidjackson148 Did you check the official documentation?
@@jfversluis do you have a link please :)
@@davidjackson148 Links are always provided in the video description.
learn.microsoft.com/dotnet/maui/user-interface/controls/map
Congrats Gerald. I like some of the tricks and tips that you post on your channels. Please how can I do styling for maui as xamarin.forms.googlemaps which has the MapStyle. I tried creating a bindable property but that didn't help. Can you give me some tips. Thanks
Thank you! That is not possible with this package. Looks like this is a MAUI compatible version of that package that you might want to use: github.com/themronion/Maui.GoogleMaps
I Love ur channel
Thank you Thiago 🥰
How i remove the + & - zoom buttons but map remaining zoomable?, thank you!
VS2022 .NEt7
I have created maps API and put it in your code in android manifest file. . The App crashes on start. I dont know why. Seems API KEY is OK. What can be the problem?
Pintype didn't change on my android map. Event after rebuild. Really weird...
I think pin type only has effect on iOS and maybe not even anymore on recent iOS versions. Maybe time to deprecate it 😄
ok
Error starting app: Microsoft.Maui.Platform.HandlerNotFoundException: 'Handler not found for view Microsoft.Maui.Controls.Maps.Map.'
I’m guessing you’re trying to use it on Windows which is not supported. That is coming to the .NET MAUI Community Toolkit soon
@@jfversluis Ok... i did it...but using your sample, the map show just the buttons not the map. in Android emulator and device the result is the same...
Microsoft.Maui.Platform.HandlerNotFoundException: 'Handler not found for view Microsoft.Maui.Controls.Maps.Map.'
That's probably on Windows, for Windows you need the .NET MAUI Community Toolkit. th-cam.com/video/G3fIVJGabUQ/w-d-xo.html