Dotnet MAUI Google Maps with Custom Pins

in this video we'll be learning about dotnet Maui Google Maps and here you can see the iOS 2 has a Google map and the Android 2 has a Google map with custom pins so in this project that is a new blank.net Maui app will be creating uh the custom pin implementation plus the Google Map on both Android and iOS so let's get started with the blank.net Maui app and let's get uh this Google Map get integrated so I'll just select the new.net Maui and we'll be selecting iit.net7 or 8 that will come along okay so here Maps demo as a project name okay so uh let the project need be Maps demo and at first we'll be uh using this plugin that is maui.google Maps so we'll be copying it uh in our project so uh here I'll just select manage nuget package add the plugin name maui.google Maps okay so we'll be selecting this option make sure that you have included pre-leases because uh the latest is the greatest so here I'll be adding the uh latest.net Maui Google Maps uh in our.net my web project so here I'll just select iPhone 14 pro before that I'll make sure that application is running fine on iOS okay so uh at first what we need to do is we have to configure our uh Google Maps uh on our Google Cloud console so we'll just select this option and I'll make uh so please make sure that this does not require any type of credit card integration or anything at first whenever you log in then you need to create a a new project and here this is a Maps demo project right I'll just keep a Maps demo app 101 okay so just give your project name as you like okay and uh here I'll just select this Maps demo 101 project okay so here uh it has asked me to install all the other plug other plugins that are essential for our Maps uh good that is our Google Maps so I have just accepted it let's go to the project so here this is the uh project that I have just now created that is Maps demo 101 inside our API and services uh what we need to do is uh let's go to the credential section okay so the blank.net Maui app is running let it be okay so create new credentials the API key okay so here uh we'll just create a new API key for our project okay so it is creating the API key I'll just uh use this API key or whenever I need it so I'll just save it somewhere safe over here so that I can use it later okay so you can just if you are lost then you can see here the so key section will show you the API key you can just copy it anytime okay so the main thing that you need to understand is uh the new account does not require Maps SDK for Android and map SDK for iOS does not require any type of billing information to be added or anything okay so you have to but you have to make it fast okay so here you can see map SDK for Android you can just search also commit Maps SDK for Android okay so you can just search search and match map SDK for Android you will also come over here just go and enable it okay and let it let it try to enable it go back okay and match SDK for iOS okay just search it for search it for and map SDK for iOS will just enable it okay so now uh it will uh try to like add both map SDK for Android and map SDK for iOS but it will uh uh now okay so when I try to enable it the iOS section okay so it has already added but it will tell me to add your billing information or anything don't add anything okay Google Cloud console so that is the project Google Cloud console okay so here you can see in our API and services okay so this is our project that is Maps demo 101 and Library uh we have already installed Google Map for Android Okay so here I have I will enable it okay so it has already been enabled okay let's go back okay so make we have to make sure that uh both the Android as well as iOS um the map SDK are enabled so I have confirmed that both the things are enabled right now okay so now go back okay so this is our API key right so we actually don't need as of now but uh let's try to configure our platform at first okay so this is the plugin implementation so here uh this is the code that need to be added that is submitted uh data or something like that right so we'll just add that code over here inside a platform Android main active main application inside here beside this okay so you just uh you can create you can create a new uh constant file also and then add it directly or you can just hard code over here also it depends upon your use case okay so I'll just hard code it and you can just use some constant class and then try to directly inherit it okay so it depends upon your use cases so here inside Android manifest uh here just search for location okay so X is fine location access course location okay so that is only needed and then uh the next thing that we need uh over here is uh the Maui side that is this implementation that is the Builder section I'll just copy it I'll just paste it over here okay so here you can see uh whenever I add user use Google Map then this uh using statement has come up automatically okay so for the iOS side we'll just again hard code it okay and then paste the same API key that we have saved it so that is it so I said is also done and right side is done okay so this is the blank.net Maui app so we don't need anything over here and in our main page.xaml.cs we also don't need anything over here okay so let's try to Okay so here is the code uh main page dot xaml here I'll just use this code okay all the code I'll be giving in the videos description below you can just add it okay um so you can take it so at xaml maui.google Maps so here we have successfully added the Google Maps and now uh the on appearing method so I have already written code for our custom pins also okay so that is whenever this page is appearing then do what need to be done okay so this whole code I'll just copy it and then paste it over here so what I have done I'll just tell you um so whenever that's this page that this main page is appearing then we will be requesting me for permission that is our location permission and we'll be getting the getting the user's latitude and longitude and uh we'll be moving our map to this that uh specific latitude and longitude plus we'll be adding a custom pin okay so that pin uh is a custom one and we can just add the label text address or anything you can make it Dynamic too and here uh we'll be adding the pin image so the pin image shouldn't be uh used with the extension that is if it is png.jpg or anything don't use that okay so inside our desktop uh this is the pin that I have that need to be added to the resources folder images okay so this is the pin and make sure that the pin is of small size that is uh here you can see uh open with uh preview okay so this pin is 32 by 32 pixel size okay and uh you have to make sure that the pin is uh uh like in the get information here you can see uh our image is the dimension is 32 by 32 so you have to make sure you are using some limited side images that is 64 by 64 pixel or 32 by 32 something are 16 by 16 images okay so that is it so the pin is made and then added and then here you can see second request permission is going to request to uh the user's permission so we have already added the permission for Android okay so that is access course location as well as X is fine location is already added then on our iOS site there is something else to be added so here uh in our custom Property Group uh we'll search for privacy location location uses description when in use this uses description okay so location when you use okay so this privacy and location information should be added with your text that is like why this app needs uh why this app needs location okay so um so you can just add your text over here why this app uh requires location either to page the users nearby or something like you can just add it of your own okay over here and that is it close all the tabs seven close and I think we have pretty achieved everything so let's try to run the project and let's see whether it works or not on our IOS and Android project okay allow while using the app nice okay so we got our the latitude and longitude and the uh the Pepin is also set okay so that is it now uh what we need to do is we need to check on the Android side too okay so I'll just try to see it in simulator means the emulator whether it works or not and it is telling me something like uh a compatible version here of minimum uh 21 to be used okay so here on our androidmaniface.xaml okay so here minimum Android version I have to set it for uh 21 okay that is Android 5.0 minimum Android version and let's see whether we get our expected output or not on the Android emulator while using the app nice that is it so thanks for watching so keep in touch for our next tutorials

Channel: Xamarin Guy

Views: 1,783

Keywords: #DotnetMAUI #Xamarin #XamarinForms #Dotnet

Id: 12DtiyKBeC8

Length: 11min 13sec (673 seconds)

Published: Wed Jun 28 2023