.NET MAUI MAP (Maps In .NET MAUI)

hello guys welcome to my channel in this video I'm going to show a demo about how to use map in dotnet mavi so let's go through it okay so first you need to install map plugin in your project so for that just right click on your project and click on manage new get packages and here just search for microsoft.mavi.controls.labs and install that in your project okay once it installed here in mavi program.cs here add one line called use mavi maps okay so after that you can use map in your Dot and mavi page okay to access a map you need to add here one namespace so that here I will add so using this namespace you can now access the map okay another thing to display a map you need to set some permission here in Android manifest and info.pls file for iOS so here in platform Android I'm just going to set some permission hearing Android manifest.tml file so these two permission you need to add access course location and the access find location and also to display map in Android you need to set you you must have uh Google API key so here that you require in metadata format so this jio API key you need to get and that value you can that key you can replace here so how to get that key so you can just go through this link I will add in description also foreign you can use so here you see setup your Google Cloud project so first you need to create new project then you need to enable billing then also you need to enable this map SDK for Android and after that choose API key so here you will see all the description how you can get that key on the credential API key to you can go through this link how you can get the API key after getting that API key you can just paste it here and after that once you run application it going to display a map and for iOS you don't need this jio API key you just need to set some permission to for setting that just open info dot PLS file and here just add location always and when in use foreign description here based on your app requirement and another privacy when in use description okay so for iOS only this permission you need to set now here now let me run the app and let's see if displaying maps in Android or not okay so here in Android manifest.jaml file I already added that Geo API key that's the written in display map here now if you set here it's showing user property to true it will just as for accessing the device location and based on your device location it is going to if you select this it is going to navigate to that location okay and instead of using this property if you want to manually move this uh manually if you want to navigate to particular location then you can do that other way let me just remove this like and here now maintain.jml.cs I am just going to add code here on on appearing method you can use jio location dot get location async in that you just need to pass geolocation request here you need to specify first accuracy so I'm just going to set accuracy High and you can specify here timeout like if you request for API and if it is not written in a 10 second then just it will just cancel the API call okay and this request I'm just going to specify here okay and this is this API this get location has seen going to return location detail so this I am just going to set now here in a map so let me just add here one name map and we're using that identifier now I can set here map.mo to this year and here you just need to specify NetSpend from Center and radius and here you can specify location so what is the location I got from here the path that I am specifying here and the okay and the radius you need to specify here so in that radius map is going to visible so you can use your distance from either kilometers meters and Miles so I'm just going to use distance from miles and here if it's Risk by 10 miles so in that radius it's just going to display the this map now let me read the application and let's see it's moving to this region or not and also before requesting this cat location I think you can check for location permission also if it is available then only call this get location as in matter okay so it's moving to current location now if you want to show some pin here on map that also you can do using adding pins to this map so let's add here so for that I'm just going to create one pin and here you can specify address then location so right now I'm just going to set whatever the location I got here or you can manually also set like a new location and in that you just need to specify latitude and longitude based on that it's just going to display that pin so here I'm just going to set this location then also you can set here type so pin type I'm just going to set here as a place and label also you can set here okay so this pin now I'm going to add here in map so you can use here map dot at pins dot add and in that just specify this pin now let me run the app so this pin is going to display in our map okay so hit display now if you want to perform some action on the click of this pane also you can do you just need to create one event here routine dot marker click and just create the method and here whatever that's in you want to perform that you can do okay so this sender I'm just going to patch pin information from here okay now let me run the app so on the click of this pin now it's just going to display alert and this address tax is going to visible okay so it is playing here on the click of this map icon now you can also add multiple pins so either this way just create pin like this and at map.pins.at like this okay or you can under the way you can do is map dot item Source here just specify the collection of pins and that data template you need to set here on map so let's do that so here I'm just going to create one please stop okay so in this list I am just going to add now collection of pins okay so I'm just quickly setting this location information foreign source is equal to this pins collection I'm just going to set here now here on main page I'm just going to set now data template here in item template I'm just going to set data template and in that I'm just going to use now start pin this data type is going to be okay so here now location I will just set location then address will be addressed and label okay so what are the information I added here that I am just binding here in data template now let me run the application so this three pins is going to visible on maps okay so it's displaying here now let's add code related to display polyline here on map so like from one location you want to display a line so that you can do using polyline so let's add that code okay so I'm just removing this code now and here I'm just going to write code related to add in polyline in map so for that here I'm just going to create object of polyline and here you can just set strong color stroke weight and the list of location here you can specify in jio part so let me add here to location so it's going to start line from this location to this location now to add this polyline in map you can use map.map elements dot add and add this object now let me then the app so you will see line from the starting location to ending location okay if you see here it's showing line now if you want to add another line also with some different color so you can create this object and same thing you can add here in map elements with the different colors and let me look at new location info also okay so now it is going to display two lines on map so like if you want to create some live running application then like based on user running speed you can display this different different color polyline on map now let me run the application so you will see plus this blue line then this yellow line on the map okay so you can see this line now also let me just see set this location here in my so it automatically going to move to this series in okay so if this plane downline now let me add another code related to adding Circle here on the starting point and ending point of this line so for that you can create now Circle object and in that you just need to specify like you can specify stroke color then fill colors and that location here you can set so let me just set this starting location here and that Circle radius I am just going to specify here and this you can add here in map elements same thing let me create another ending point and this line ending location here on the screen to set in here in ending circle and that color I'm just going to set as a bit now let me read the application so you will see two Circle one here on starting location and another here on ending location okay so if this playing here uh starting location Circle and ending location Circle and let me do another change here also here I'm just going to use 2.5 miles so it will be zoomed when I run okay so now it's displaying correctly now let me run this in iOS let's see if this playing or not okay so first it asking or location so I'm just going to set up a while using a now let me just open again okay so it's mode to location and it's showing the starting and ending Circle as well as this line okay so that's all for today I hope you like this video and thank you so much for watching it

Channel: Programming With Pragnesh

Views: 1,566

Keywords: Maps in .net maui, .NET MAUI Maps, Maps in Xamarin, Maps in .NET MAUI, Google Map in .NET MAUI, .net maui, net maui, maui c#, maui tutorial, maui .net, maui, C# maui, dotnet maui tutorial, blazor tutorial, blazor crud, .net maui app

Id: mq4GfTUQavw

Length: 23min 36sec (1416 seconds)

Published: Sat Jul 22 2023