.NET Maui Apps | Integrating Google Map with API Key in Android application in MAUI.

Hello friends and everyone welcome  back to netcode Hub channel   in this video we are going to talk about  how to integrate map in.net Mary application   focusing on the Android application or Android  phone now for Windows we can do that later   because Windows does not support  the current way of integrating map   buy for Android it does support so we're going to  talk about using the Android maybe later on we're   going to have a video on how to integrate Bing  map in Windows application or desktop application   so I made a video on how to get an API  key so this API key that I have here   was done by a video and I put the the link  under the description so if you don't know   how to get an API key from Google Maps then  you can watch that video and get how to   grab an API key so let's assume you've watched  that video or you know how to get an API key   so create a new key from the cloud.console  or console.cloud.google.com and grab your   key so with this there are procedures or ways to  integrate a map you know we can open native map   on the Android phone or desktop application I've  done that video to you how to open the native map   so I'll put the link under the description too by  this video we are going to talk about how to open   the map in our application so when you read the  documentation for map integration let's start from   here that is a map so when you go to learn the  microsoft.com and net my user interface controls   then search for map and that is over here you  can have this article now with this there are   a lot of things that you need to consider when  integrating map in Android application we are   going to go or go for the basics maybe we can  read more for the advanced ones so first of all   as you can see here there is an important note  that we have to read now this is saying that   the map control isn't supported on Windows  due to lack of map control in Wind UI that's   a Windows user interface however the community  toolkit.mary.map package provide access to bank   map so here or this the one that we're going  to do currently does not support in desktop   the package that we can use to support it is the  community toolkit.mary.maps we're going to have a   separate video on this let's focus so to set up  this there are several ways so we first have to install this so and this is provided by the  microsoft.mary.control.map package so we have to   grab this package and install as I speak I have my  project created and run in that emulator so as you   can see from here I have this application let's  go to the source code I'm going to stop debugging   then let's install this package so make sure  you are also connected to internet as well then   click on the browse and now in here let's paste  the package name so let's install this package   so after installation what is the next thing  to do we have to add this use marry app so   let's copy this I'm going to do that in the  mariprogram.cs file so let's apply and accept it so this is done when you check dependent is  when you check the Android and packages you're   gonna see it over here marriage.control.maps and  that's what we have let's go to my program.ts file   and add this username so use marry Maps  and now this is going to add a namespace so so let's make this the change over here so we  have to clear this up and let's see if we need   to use any extension or namespace okay so it's  already included now the next thing that we can   do here from this is we have to add a platform  configuration if you're using iOS and macatar   list then you have to do this so you can add this  to your info plist and your info playlists when   you come to the platform you click on the iOS  you can see we have the info playlist so you   right click and you have to open with XML editor  so XML editor let's use this then open so you have   to add that over here so using the namespace you  have to add it over here like what we started okay   so when using the Mac you can go to this and I'll  grab all this and now you paste it over here my   currently we are focusing on the Android so if  you want to use the Mac you do the same that's   very simple let's go to the Android so here under  the configuration we have to perform this process   the first one here is we have to get the Google  Map API key and add it to the our app menu first   aside from that you have to specify the Google  Play service version number in the Manifest why   do you have to do that you talk about that and the  third one here is specify location permission in   the Manifest and the last one specify the right  external storage permission in the Manifest now   the third and the fourth one they are optional  you can decide to do that because it is based   on a specific API service so maybe if it is lower  than API steps of 21 or maybe Android versus 9.0   or 10 or 11 maybe you need to do that but from  13 12 13 maybe it is okay that's how you have   is optional so if you know the Target that you are  doing or the range of your framework that you are   doing for then you can decide to choose whether to  add this optional one or to exclude it now let's   get the API key so to get an API key you know  we have done that already so we have to do this   now you can see we have to add this to our  let's copy this let's go to our project   and less and write Android manifest let's open  also this in XML editor and now in here we have   to add this metadata in it so you can see there is  a manifest file and you have permissions over here   we have this application and in here we are going  to paste this so you have to place our API key   and now I want to check this it is same you  have the application and we have all this and   let's pay so in here the name over here is  not going to be overridden but the value has   been written so we go to our credentials page we  copy our API key then we come here we clear this and now we paste the API key  here so there's an API key   aside from that the next thing that we can do  from this the documentation is the second part   is we have to specify the Google Play service  version in the Manifest so if you check here   now this is just an explanation to this API  key name and the value so maybe you can just   read about this now let's specify Google Play  service version so we have to add the following   declaration within the application element of  the Android manifest so all this we have to   copy this and I add this to the handwriter let's  grab this and in here we have to also add this   when we are done with that we have to specify  permissions so permission to access allocation   and we can grab this permission from  here so let's grab this permissions and   let's go to our app now in here you  can see we have access network State   and internet so this one too let's paste  this and that's the location permission   now the nursing that you want to talk about here  is we have to specify right external storage   permission so it is saying that why do you have  to do that if you are up to get API 22 or lower it   will be necessary what to add the right external  study permission to the Manifest as a child of the   Manifest element so when your target API it is 22  or below then you can use this if you want to know   the API 2 or below we go to the settings we click  on tools Android and we can go for the SDK manager   now when you wait for this to launch it's going  to tell us that when you click on tools API 22   let's see so API 22 that is for Android version  of what 5.0 so 5.1 and below so if you're using   5.5 your version or if your application  targets the 5.0 Android and Below then you   have to include that so let's include it let's  go to our documentation and now let's grab this   let's go to the program that the program  here and permissions we have to add it to the   manifest file okay so we can now save all this  the next thing that we can do here is to add   a map control now within map control there  are some attributes that we can talk about   these are the appearances and the behavior that  is map exhibit we have a showing user and here it   is a blue item Source over here so you can read  through all this we're going to focus about this   traffic enabled scroll enabled a zoom enabled  map type and let's say maybe pins or visible   region so to do that we have to add this name  space to the content page so let's grab this   and let's go to our project and now here  where we have this main page.xamer file   we open this and let's add  this to the name space here   aside from adding this name space what we can do  again is to add the map so let's grab this map and let's clear all this because you  don't need this so we can comment this and now let's paste our map here so this is  our map we have a name given as map now let's   save this let's hand it an application and see  what we have now so I could say that the map   is now loaded and we have default one is um  marry there are few things that we can also   do now there is an equivalent c-sharp code  if you want to use a csap code to do that   so you can add the namespace and you create an  instance of the map and you set the content of   this page to the map object that I've created and  this will be the outcome of it so the default one   is in the Maui land as you can see the map over  here this is the default one when you run this   application now so there are a few things that we  can talk about the first one is the map types so   map types there are three types you have streets  so this specifies that a street map will display   so Strip by strip we also have satellite one to  have a satellite image then it can be a satellite   over here or if you want to combine the satellite  in the street then I have to go for the hybrid   so you can do that with this so you  can just satellite let's go to the map and now in here what we have our main page  now this map you can specify the map type   so we have map type and you can set to the  hybrid or any aside from that there are also   let's talk about the next one we can also talk  about um displaying a specific location so with   this plane you know we have to also add this to  the namespace so we can add this essential to   the namespace we grab the current content or the  current location so you copy this then you go to   the display then we add this the sensor so  let's add this name space so we have this   Maps objecting because we have this map which  holding the name space over here for the controls   so once you're done you know when you come here  you can specify the map and now here we need to   specify an argument now this argument we specify  the map span and within the Mouse pan we have to   also specify an argument so as you can see the  map control needs an argument now the argument   contains the map whereby this map also contains  an argument and on this argument contains the   sensor so the sensor here it is for where you  have the location because you want to grab the   location and the sense also contains an argument  and here we pass in the double that's the latitude   and we're passing the longitude okay and the same  thing applies to this so you pass in the latitude   and the longitude to get us the current location  so we can do that and also this is also the way of   doing it in the C sharp code so the result will  be like this so you're going to have a specific   place that you want to display and a data or  location okay so there are a lot of things   that we can actually read through there's also one  thing that we want to talk about is also known as   from the controls you know we can talk about a  showing user so if on this side it shows that   to true it means it's going to get at the current  user's current location so let's also add that to   the map so it's showing user so  we can set this to true or false   and also as you can see we have another  list so you can see we have it's invisible also one is called accuracy we have a  lot over here that we can actually use   let's say is a scroll enabled there's traffic  enabled a zoom enabled so all this you can   set this to true so this one is zoom to True  user can zoom the map now let's set traffic   so we're going to show up the current traffic  and the free areas in it so you can do that   too and then the next one we can also add is  scroll enabled so here user can scroll and see   so let's set this to True okay so you see these  are the controls that you can have in map thank   you so much for watching this video if you like  what I'm doing you can give me Thumbs Up And   subscribe to this channel too we have a lot of  lessons and projects so we can just go there and   now check it out over there take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 909

Keywords: asp.net core, Registration, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), local storage, scalffold, scaffolding, assign-role, maui, mobile apps, maui app, mobile app, desktop app, create app, barcode, qrcode, android, apk, applications, application, publish, windows, MSIX, publish apk applications, poweshell, cli, command-prompt, google api key, map key, google map api key, cloud key, direction, maps, integrate map, desktop application, google map.api key, api key

Id: I2iQnFLv0Hs

Length: 16min 44sec (1004 seconds)

Published: Sat Aug 05 2023