.NET MAUI Maps: A First Look - Pins, Polygons and more!

[@jfversluis]

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: kzbin.info/www/bejne/paTXmJ1oraeSpc0

[@jvmg]

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.

[@54tan123]

Is there any hope of the map view being mvvm compatible in the near future? Right now you can only add/remove pins in code behind/there's no way to bind to the Pins property.

[@davefoley5071]

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...

[@jfversluis]

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 :)

[@cizzl3702]

A video or short example to show this as MVVM would be very cool!

[@EmbraceUnity87]

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.

[@cizzl3702]

Omg, finally! Thank you very much for it! I would also love to see windows support

[@jfversluis]

We’re working on something! Not sure what it will look like though

[@gregorymoore2877]

I would like to see a custom pins video. Also, can a subclass of Pin be added to the map?

[@chandra_arifin]

Really happy to see new videos on MAUI tech 👍👍👍💪

[@jfversluis]

More to come!

[@strnbrgd]

You said there is an option for custom pins. How? Maps look amazing. great performance

[@Eric-pl7pz]

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?

[@PavelKonoshchenko]

same to me. have you found the fix?

[@EmbraceUnity87]

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.

[@bbqchickenrobot3]

Cant this be accomplished by using CommunityToolkit.Mvvm ? Haven't used it myself but, thought it may be helpful

[@EmbraceUnity87]

​@@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.

[@danailnedkov9561]

@@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

[@christerad1669]

Is there any way to use binding context on the pin?

[@ignatiusmaziofa2393]

Thank you. Is it possible to change the color of the pin?

[@S3Kglitches]

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

[@jfversluis]

You can always create your own inherited version of Pin :) I don’t think we have anything for that right now

[@josedonizeteoliveirajunior1744]

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

[@jfversluis]

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!

[@weggetor]

I would be highly interested in a video about creating polygons on the map. Need this for a game I'm working on

[@jfversluis]

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?!

[@yosimadsu2189]

Would you please show us how to use BLE in .NET MAUI? Because this is the only feature that is not implemented in MAUI.

[@johnb2572]

I would like that too

[@satish8299]

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.

[@jfversluis]

Thanks!

[@S3Kglitches]

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.

[@jfversluis]

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 :)

[@jasonyang696]

Hi Gerald, Thanks for the sharing. Do you know how to use communitytoolkits mvvm to map control? I am struggling about markerclicked event on Pin. I don't know how to bind it to a command. Thank you in advance.

[@chdub-vu8vb]

Thank you very much for these excellents videos !! Have you any news about a Wndows version of a mapping tool ?

[@jfversluis]

Thank you! We’re working on it for the .NET MAUI Community Toolkit

[@aslamiqbal3435]

💓💖. I was dying for this.

[@jfversluis]

Just in time then! Hope you’re still alive!

[@aslamiqbal3435]

@@jfversluis yeah I'm breathing

[@mikey-zk9nd]

TNice tutorials was great! the way you explain tNice tutorialngs and repeating it really helps. thanks for the tutorial!

[@jfversluis]

Glad it was helpful!

[@DrEnginerd1]

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?

[@albertngoudjou8581]

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 ?

[@ThaveeshaKannangara]

👍 Good one. waited for maps

[@jfversluis]

Just a little longer and it will be there! Anything else you’d like to see a video about with maps?

[@easyidea4307]

amazing gerald thank you so much 😍

[@jfversluis]

You’re very welcome!

[@MuhammadNadeem-wj6xd]

Very nice @Gerald keep it up

[@jfversluis]

Thank you, will do!

[@senthuranmaxx4895]

Great Video Gerald 🙂. Thanks for that. Can you please tech, how can we navigate from one location to another location(live path navigation)?

[@jfversluis]

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.

[@anju9278]

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?

[@mihailkatsarov3209]

Great Video! Maybe one video about Authorization and authentication with facebook and gmail would be useful too.

[@jfversluis]

I’m not great with auth, so not likely soon but who knows :)

[@marcoerlwein2165]

thanks for the video, the map control work with maui blazor hybrid ?

[@kaywiberg2159]

Great video! Keep up the good work!

[@jfversluis]

Thanks Kay! Will do!

[@pushanroychowdhury5741]

@gerald Great video. Thanks a lot. If we click on a pin that was added, can we get a callback for that ?

[@jorgerz239]

u rock!!! i love this channel 🙌

[@jfversluis]

Thank you so much! Tell your friends!

[@jacobhamblin1880]

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.

[@mister_stadler]

thanks

[@jfversluis]

Thanks for watching!

[@GuildOfCalamity]

Great video. Could you do a tutorial on AppActions in the future?

[@JuanDevelop]

This is so EPIC. I just start a new project a this information is so usefull

[@jfversluis]

Great to hear! Let me know if you need anything!

[@SimplyRed2010]

Hi Gerald, making the same app with Blazor and Maui, how can we do? An example would be greatly appreciated :)

[@laurolnunes]

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

[@jfversluis]

Sure, but that is something you’ll need to implement

[@MakoMusicYT]

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?

[@jfversluis]

Not much has changed from what was in Forms except for what I mentioned. But we’re open to ideas!

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!!

[@jfversluis]

.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

[@jfversluis]

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

[@MiguelSantos-p7z]

Is it free to use? Don't you have to pay for it after "x" map renders?

[@jfversluis]

Not for iOS, I’m not sure how the Android/Google Maps pricing works tbh

[@Dimitris.Christoforidis]

Thank you Gerald once again for your helpful videos. Is it possible to have google maps in Iphone? Maybe using an external library?

[@jfversluis]

You’re going to have to find a plug-in for that. It’s not going to be possible with the official Maps

[@Dimitris.Christoforidis]

@@jfversluis Thank you. PLease keep us inform if you find something!

[@CSharpAntero]

Thanks Gerald , great video. Do you know, if there is for Maui Map an MVVM support planned?

[@jfversluis]

What kind of MVVM support are you looking for?

[@CSharpAntero]

@@jfversluis Drawing a route, setting pins and polygons

[@mugileeshwaranj.s8484]

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?

[@LinesSoftwareDevelopment]

Yes, yes, windows version please

[@jfversluis]

We're working on it here: github.com/CommunityToolkit/Maui/pull/604

[@wasimalam7677]

I wait your all videos related to .MAUI

[@jfversluis]

😄 thank you!

[@checox1909]

Great video man, like always, now I can do my post XD hahahahahahaha

[@jfversluis]

Haha absolutely! Looking forward to it! Thanks my friend!

[@anandshindey]

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?

[@cizzl3702]

I think you can do this with Google places API

[@jfversluis]

Indeed, you will need to use another API for that. This is just showing a map

[@kardelencanoglu1353]

The video is great. Can you make a video for 3D model integration with MAUI?

[@kardelencanoglu1353]

Or can I embed Unity in MAUI?

[@jfversluis]

I have 0 experience with that, so probably not anytime soon. Sorry 😅

[@kardelencanoglu1353]

@@jfversluis No probem. I hope you want to try it one day 😂😂😂

[@harag9]

Looking good. thanks for sharing - can it also show routes between 2 locations?

[@jfversluis]

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.

[@harag9]

@@jfversluis OK thanks for that. wasn't sure how much functionality it has.

[@stijnvanhoecke4753]

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...

[@jfversluis]

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.

[@stijnvanhoecke4753]

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.

[@jfversluis]

@@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 🤷‍♂️

[@danielalbertosanchezsierra2972]

Thanks!!!!

[@jfversluis]

You bet!

[@Mielesplayz]

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)

[@jfversluis]

I would think it should do that automatically.

[@Mielesplayz]

@@jfversluis I guess I messed something up then

[@niharikasaraswat2181]

Can we restrict keyboard entry to one language only like in English and user can't type in any other language in xamarin

[@jfversluis]

Not that I know of

[@b60977]

Does anyone know hot to visulize a heatmap on an ArcGis map with .NET MAUI?

[@bodyavl]

Is there any way to display route from point A to point B on this map?

[@jfversluis]

You could with polylines I guess.

[@bodyavl]

​@@jfversluis Yeah, that makes sence, thank you

[@guywangueu9817]

Thanks Gerald , but I have a question, how can I change pin 📍 image for android and iOS in xamarin forms?

[@jfversluis]

This is probably helpful: docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/custom-renderer/map-pin

[@almightyfox_official]

Hi, how can I display a route between 2 locations on the Map?

[@jfversluis]

You probably want to use polylines: learn.microsoft.com/dotnet/maui/user-interface/controls/map?view=net-maui-7.0#polygons-polylines-and-circles

[@woistdasniveau8290]

Please tell me, that it is easier now to center rthe map around the users position and keep it centered.

[@jfversluis]

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

[@woistdasniveau8290]

@@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?

[@hrishikeshgarud7177]

Custom pins video.

[@jfversluis]

No please?

[@Urakaroo]

@@jfversluis +1 to please make a video on custom pins ^_^

[@TheSasanpasha]

can you please support custom pins ( label, position, color, address, ImageSource, and infowindow , etc.) themes, ?

[@jfversluis]

Not in the first version, but hoping we can add more features later! Of course anything is customizable through custom handlers and such.

[@titolmtv1206]

How about .net maui push notifications? I think that is important feature as well.

[@jfversluis]

What about it?

[@Xrail]

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.

[@jfversluis]

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

[@doublebass120]

@@jfversluis does it also test whether the key is valid, or can we just use any value?

[@jfversluis]

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.

[@Xrail]

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

[@billymartin6497]

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)

[@jfversluis]

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

[@charlesdavidyoung]

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!

[@jfversluis]

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!

[@charlesdavidyoung]

@@jfversluis thanks Gerald! I guess I’ll wait for the recenter feature then. It should be very easy to add.

[@ducvunguyen5607]

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?

[@jfversluis]

Only show pins that are actually in view and group them when zoomed out

[@ducvunguyen5607]

@@jfversluis is there any example for it? It worked well with Xamarin but when change to MAUI, it is too slow

[@ducvunguyen5607]

@@jfversluis Is there an event when it be zoom out?

[@marketdevsoft4403]

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

[@jfversluis]

Make sure that you add the initialization line in your MauiProgram.cs

[@RajK09]

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?

[@jfversluis]

Try upgrading the plug-in. The Maps NuGet is released officially by now so install it from NuGet. Also, doesn’t work on Windows!

[@RajK09]

@@jfversluis yeah I did update from Nugent itself and I'm running on Android. The map control is showing blank

[@jfversluis]

For Android you need an API key as well. And add UseMauiMaps in your MauiProgram

[@RajK09]

@@jfversluis yes Gerald, I used an API key and configured .UseMauiMaps() in MauiProgram too. But maps are not loading

[@davidjackson148]

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.

[@jfversluis]

It is available?

[@davidjackson148]

@@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' :(

[@jfversluis]

@@davidjackson148 Did you check the official documentation?

[@davidjackson148]

@@jfversluis do you have a link please :)

[@jfversluis]

@@davidjackson148 Links are always provided in the video description. learn.microsoft.com/dotnet/maui/user-interface/controls/map

[@oj3486]

Didn‘t you already use the default map in Episode 6 of the crash course?

[@jfversluis]

Not that I know of. Do you mean the little map that is in the Android emulator settings?

[@oj3486]

@@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)

[@jfversluis]

@@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 :)

[@oj3486]

@@jfversluis Ah okay. Thanks for clarifying :)

[@harag9]

@@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.

[@ABS-CBN-w1l]

Is it ok to use it in production?

[@jfversluis]

Not yet! Will be released with .NET 7 as stable

[@ABS-CBN-w1l]

@@jfversluis Thanks for the info.

[@samsman007]

Can it run on Windows Machine?

[@jfversluis]

If you install the .NET MAUI Community Toolkit, yes Maps Control for Windows with .NET MAUI and Bing Maps kzbin.info/www/bejne/fWTJeomAfMaVi7M

[@markusf.meisinger5832]

is there a way to use the map data offline?

[@jfversluis]

Unfortunately not!

[@markusf.meisinger5832]

@@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

[@jfversluis]

Try MapsUI: github.com/Mapsui/Mapsui And thank you Markus!

[@itsmejim3033]

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

[@amnshumansunil3371]

Video on in app update in Xamarin please!

[@jfversluis]

I’m pretty sure I’m not going to make that one, sorry

[@amnshumansunil3371]

@@jfversluis thanks anyway!

[@yanaraldaghestani6305]

is there any way to run google map on android and ios ?

[@jfversluis]

No and that probably won’t be supported. If you need that, a plug-in needs to be created.

[@thiagooliveira4192]

I Love ur channel

[@jfversluis]

Thank you Thiago 🥰

[@PavelKonoshchenko]

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?

[@obioriaku9736]

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

[@jfversluis]

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

[@francescp.4778]

How i remove the + & - zoom buttons but map remaining zoomable?, thank you! VS2022 .NEt7

[@fabioikomotta]

Error starting app: Microsoft.Maui.Platform.HandlerNotFoundException: 'Handler not found for view Microsoft.Maui.Controls.Maps.Map.'

[@jfversluis]

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

[@fabioikomotta]

@@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...

[@Paul-uo9sv]

Pintype didn't change on my android map. Event after rebuild. Really weird...

[@jfversluis]

I think pin type only has effect on iOS and maybe not even anymore on recent iOS versions. Maybe time to deprecate it 😄

[@Paul-uo9sv]

ok

[@PavelKonoshchenko]

Microsoft.Maui.Platform.HandlerNotFoundException: 'Handler not found for view Microsoft.Maui.Controls.Maps.Map.'

[@jfversluis]

That's probably on Windows, for Windows you need the .NET MAUI Community Toolkit. kzbin.info/www/bejne/fWTJeomAfMaVi7M