Google Maps in .NET MAUI iOS? Easy with This Plugin!

who needs Apple Maps when you can have Google Maps in this video I'm going to show you how to add Google Maps also for iOS in your Dot and Maui application [Music] now before I go and show you how to add that Google map to your ios.net Maui application there is one good thing that's good to know about this plugin it supports IOS and Android so done at Maui of course also supports Windows Mac OS tizen but this plugin supports Android and iOS actually while talking about this I realized that you might be able to pull it off on Mac OS because Mac OS uses Mac Catalyst which basically allows you to run your iOS applications on a Mac so maybe that works as well try it out let me know in the comments or maybe I'll try it out myself right after this but that's good to know other than that this plugin is pretty much amazing it's called maui.google Maps I'll show you that in a little bit and it has all kinds of features that are not in the done in Maui Maps package so there is a lot going on here and actually I think we should just switch over to visual studio and I will just show you so here we're in Visual Studio 2022 I just created a file new.net Maui project you can see that on the left and it's already running on the iOS simulator which you can see on the right so because you know Google Maps on Android that's kind of like standard right so I want to show you this on iOS and I've linked Visual Studio to my Mac build host that's on my network um and I can mirror my iOS screen here so it's actually running through a Mac and you can see it right here so actually I'm going to start running it now for a little bit because the first thing that you want to do is install the nuget package so go over to your solution Explorer right click on the project and then you go to manage nuget packages and we're going to look for it's actually called onion dot Maui dot Google Maps and if you search for that then you will find it here onion Maui Google Maps um 5.0.0 is the actual version at the time of recording so let's just install that and it will install it for IOS and Android I didn't remove all the other targets here you want to accept all these licenses after you've read them obviously and then it will install this package on your project so the other thing we still need to initialize this a little bit so this is installed now and as is kind of like with a lot of dotnet Maui plugins you need to go to your Maui program and bootstrap this plugin for a little bit so let's go back to our solution Explorer again now open the Maui program.cs here we go and what do we want to do for this Builder is we want to add some stuff here and we want to make a difference between Android and iOS because the way that you have to specify the API key for Google Maps is a little bit different between them so what the first thing that you want to do is basically go here and say using um probably also onion is it onion no is it Maui dot Google Maps there we are and then you probably want to go here to the Builder dot use Google Maps here we go oh it's actually in Google Maps hosting all right so it helps me with that thank you visual studio and you can already see it has red squigglies because it doesn't even have this for like Windows and and my Catalyst probably but it does have it for iOS but for iOS we need to specify a string here um and but when I switch the target here to Android you will see that it doesn't have this overload with this string right so now there's weird things going on but don't worry I will help you out here um so let's get this if Dev in here if Android we want to do it without this string right here and then else if L if in this syntax iOS we want to have that other one and we need to do an endive right so we need to do this and then I can say here use Google Maps but now I need the other one with the strings right here and I think that now everything oops this end if is not correct and if there we are and now everything is happy right so I'm on Android this is happy when I go to iOS this one is happy too so well except for the actual API key right so let's actually talk about that for a little bit so there is one thing that is good to know about the API key um ask me how I know because it didn't work I couldn't get the Google Map this plugin to work on iOS and I couldn't figure out why turns out on Google when you work with these API keys that you have to enable certain apis so you have an API for Google Maps on Android and you have an API for Google maps on iOS so that is a thing that you need to enable for this API key I had to specifically enable the SDK or whatever it's called for IOS as well before it suddenly start working so I will show you that it very shortly in a little bit I just wanted to put this Pro tip in here so that you don't spend a lot of time like I did basically so here you can see the actual portal for the Google apis I have this map for JavaScript API even enabled I'm not going to walk you through this in great detail I'm sure you can figure this out yourself but the important thing here is whenever you have these apis you have these enabled apis right here and I only have this Maps SDK for Android and I hear it down in the list you can see more apis so pretend that this Maps SDK for iOS is not here in the top list but here in the bottom list and and I click it then it will be brought to a page and you really have to do this button enable and only then the API key will also be enabled for that SDK so that's what I needed to do for IOS as well um just for you so you don't spend a lot of time on this okay so let's continue here and actually I'm gonna pull this API key from somewhere where I had it already so let me just copy this real quick of course this also means that you can have have two separate API keys for IOS and Android if that's what you want but I'm just going to use the same one right now and by the time that you're watching this video I've thrown this one away so don't bother trying this one at home so this is our setup for iOS mostly there's one other thing that we need to do so go over to our solution Explorer the platforms folder then iOS and the info plist I'm going to right click and do open with the XML text editor because that's a little bit easier to copy and paste something in here and I'm going to paste this key and a string which has to do with the location in use because whenever I say hey I want to see the user location on the map I have to request the permissions to actually do that right and this string will give the user like hey the app needs location to display on maps you probably want to put some reason in here so that the user knows hey this is okay this application I can trust them with my location so that's for iOS for Android I'm not going to run it on Android but just to be complete here let's go to our solution Explorer and this time to the Android folder the Android manifest and I want to do a couple of things so here is the application node let's see if we can find the end of it here we are and you want to expand on this and then here I want to paste in this little metadata node which also specify the API key right here so this is the same one and we are going to specify that with blah blah API key and then you also want to here put the permissions for the location so use this course location uses fine location so that that is requested through the map as well and we should be good to go so that's for Android again I'm not going to actually run it so I'm going to forget about that but we have everything in place to actually start implementing our map how exciting is that so let's go over to our main page of xaml and start consuming that map so the first thing as with again a lot of product plugins you want to add this XML namespace and in this case I'm going to call it Maps just call it like that and I'm going to search here with intellisense for maps as well and if you want to use the maui.google maps that's the one that has all the bits that you are going to use here in in this example and I'm going to throw out all of the scroll view stuff we don't need any of that so let's just do this and I can now start typing here maps map right we have this map right here and there's a couple of things well there's a lot of things that you can actually do with this so we have like all these pins right we have events pin clicked drag so you can drag the pins apparently you can set selected pin or get the selected pin you can set my location enabled or my location button clicked so you can also influence like the button behavior and that kind of stuff now there is one good thing to know you have a lot of these enabled things has rotation enabled scroll Zoom but a lot of this is obsolete you can still do it but you need to do it a little bit different so if we do this has rotation enabled and set a value it will also tell you like hey you shouldn't be using this please use the the map UI settings rotate gestures enabled I couldn't really find a way to set these settings in example which is kind of weird because everything that you can do in c-sharp you should be able to do an example so there's probably a way I just haven't figured it out yet but what you can do is of course reference this with an X name right here and I'm going to call this my map and now from code what you can do is here oh I have to remove all this code else the build's not going to work here because I removed all those visual elements right and I can say here my map Dot UI settings Dot and here we have like the the compass enabled indoor level picker so whenever you go like the indoor Google Maps you can pick the level that you're on the maps toolbar my location button you can enable and disable all these UI things that can show on your map right so I'm not gonna do any of these right now I just want to show you the basics so I'm going to go to my main page again and what you can set is also like the initial camera update so that's kind of like the initial camera where you're going to be so initial camera update and there is a special kind of syntax I'm not sure if it's standardized or just for this plugin but you can come up with a couple of things here so the first things let me actually just copy and paste it from here is the coordinates so we have the coordinates this is a latitude and longitude right then we have another comma which is um I don't know actually what is this one is it's not really specified um oh it's the zoom it's a zoom it's a zoom so that's the zoom level I think the zoom level for Google Maps is like between I don't know 1 and 14 something like that so that's the zoom level um then this is the rotation so the rotation of the map for the compass and then you have the Tilt right so if you're like looking at it to the horizon or kind of like from above so you can specify all of this with this kind of special syntax I'll I'm reading this here actually from a little bit of a comment that is outdated so this is not the location is Netherlands and the zoom is five right so I'll leave that in all the code has a accompanying GitHub repository that will be linked down below so make sure that you check that one and this comment will be in there so that you know um what this is exactly of course again this can also be from C sharp code if that's what you want but if you want to do things from example this is a nice way to do it now let's just add a couple of more things I want to actually show this up nicely so let's do vertical options fill and expand that it fills up the whole thing here and what I want to do is the my location enabled is true so that it actually shows my location so that's kind of like your basic use case right and let's just run this on the iPhone so it's going to launch here it's going to run here on the right on the iOS simulator and we're going to see this application it should show me a full map but not really like the dotted Maui Maps where you would see Apple Maps you will now get the actual Google Maps and with all the options that we've set here all right the application is coming up the simulator has been started to launch the app there we go and are we actually going to see the Google Map hang on for the next episode no no I'm kidding I'm kidding I'm not that kind of Click bait Cliffhanger title I'm just trying to fill the time until the application launches here so here we are the Google Map comes up it it asked me for my permission if I want to allow it once she has to do allow one so I'm just going to get myself out of the way here allow one so it's actually going to get my location and you can see here this is the lat long that I said with the zoom level which is um pretty high up as you can see right here but if you zoom in you can see like this is just a Google map stuff right you can see the little Compass here which is apparently default you can zoom out and zoom in by by actually pinching I can go to to some other stuff because my location is actually simulated of course because I'm running the simulator right here so my location I think is somewhere in the US here probably somewhere here in the the Apple campus I don't know something around here I don't know why it's there so you have all this stuff and that is how easy it is to get started with this plugin now this is a very basic example and I didn't want to you know make the video any longer by doing all kinds of advanced stuff if you want to know more advanced about the options right here let me know down in the comments and I can go into it a little bit more but just to show you what else is there there is a sample app in the repository for this plugin again the links can be all found down below and let me just launch that app right here because it has a sample app with a lot of the options that this plugin can actually do so here we have that basic map right um actually let's just click on it so I can set the map type which is Street or I can put it to satellite or you can change it to hybrid um again I'm a little bit in the way here um you can set it to terrain so you have all this stuff you can do the UI settings here so it's the scroll gesture enabled so when I go over it now nothing happens right and if I enable it again then I can suddenly scroll um can you zoom can you do can you do all these things is traffic enabled right so you can see that and then you can see if it's it's apparently busy right here um I don't know where we are actually so you have all these things but there is also pins right the pins that I already mentioned so you can add a PIN to Tokyo so let's go to Tokyo at this pin you can see you can actually still even um rotate that a little bit I can go to New York oh New York is not added well let's add a PIN to New York and I can select it programmatically so that this little tool tip pops up again I can I can move around with this I can clear the selection so there is all this kind of cool stuff that's in here one thing that I really wanted to point out is that you can also do the custom titles so this is just the regular tiles but you can also do open railway map I don't even know what that is but it apparently has something to do with all the railway in the world you can also use open street maps or load the tiles from openstreetmap and get that kind of like um look and feel in here you can even load your own images you can do that synchronously or asynchronously so you have all this stuff that you could work with this video is already longer than I wanted to make actually just because there's so much good stuff that is in here to show you um I can't say it enough if there's one thing that I want you that you want me to dive into let me know down in the comments and also for all your other questions and things that you might want to know inside or outside of this topic I'm happy to help you with anything that can make your.net value or net Journey easier thank you again for watching one of my videos please click that like button so that everyone can learn about the Maui Google Maps plugin that you've just seen and we will spread the love I would very much appreciate that subscribe too much Channel if you haven't done so already and before you go maybe check out this playlist with more donut Maui videos and this playlist with more amazing plugins that you can also use with dinette Maui see you for the next one foreign [Music]

Channel: Gerald Versluis

Views: 5,189

Keywords: .net maui, dotnet maui getting started, dotnet maui, dotnet maui tutorial, .net maui tutorial, c# maui, learn .net maui, .net maui app, learn dotnet maui, .net maui getting started, maui tutorial, .NET MAUI Google Maps, google maps ios, maui maps, dotnet maui maps, maui maps google, maui maps google ios, maui.googlemaps, maui google maps, net maui ios, net maui app, net maui tutorial, net maui, .net maui example, visual studio 2022

Id: 775rzp2U82M

Length: 15min 58sec (958 seconds)

Published: Tue Feb 28 2023