Setup Maps in Your Xamarin.Forms Apps

a big advantage of mobile devices is that they have all kinds of sensors on board that you can use in your application one of these is the location like the gps chip in there that you can use for maps and maps always look pretty in your app so let's see how to implement maps in xamarin forms now before we dive straight into the code of course i'm going to show you what this video is all about it's about setting up the map as you can see here on ios and also on android so we can scroll around here we can zoom out a little bit we can go everywhere with this map you can actually also show the user's location so maybe this in itself is not very impressive but it takes a little bit to set up especially on android so let's go check out how to do it here we are as always in visual studio 2019 for mac on the left you can see the example page that is shown on the right in the ios simulator in this case i'm going to implement it for android and ios in this video you can also implement it for uwp but as you can see i'm on a mac so uwp is not going to work here if you want to see a video on uwp implementation for maps as well please let me know in the comments actually so you can see it running so let's update the title so welcome to xamarin forms is going to be our maps sample save that and with the power of hot reload you can see it update automatically on the ios simulator also works for physical devices the android emulator all the things so that's really cool actually the thing that i'm about to do right now is uh you know install the new get packages so that's all stuff that's not going to work while the app is running but you know let's just stop it actually and so like i said the first thing that i'm going to do is install the new get packages so on my solution in my solution explorer i'm going to right click i'm going to say manage nuket packages and we're going to look for xamarin forms dot maps so this is a first class citizen from the xamarin forms team xamarin forms maps it always has the same version as the latest xamarin forms version basically so be on the lookout that you install the right version for the right xamarin forms version that you have installed but that should go automatically we're going to click add package and we're going to add this to each one of our project because if you've watched multiple of my videos and you know how xamarin forms works then you know that you know we have on kind of in the shared library we have the abstraction of the map and then on android and ios we have the actual platform implementation of how the map should be rendered so the renderers um and you know you basically install three different kinds of nugets for all these projects um so then it knows on which platform how to render a map for that specific platform so that is how that works and that's why you need to install these packages on all of these projects while i was talking the packages were installed successfully now for each platform you have to do a little bit of initialization let's start with the easiest one that is ios so let's go into our ios project and then into the app delegate cs let me actually get this one out of the way there we go and then here i don't know it's probably best to do it after the forms in it we can say xamarin dot forms maps you can see it already come up here dot init and that's it so because you know apple maps just works basically you don't have to go out to a special service you don't need an api key so you can just do init no special api keys or whatnot are required the only thing of course that is required is the permissions so you need to ask the user permission to use their location because the map can not only show a map but it can also show the location of the user so you have to request the right permissions from that user um so let's see how to do that for ios and of course we have to do that in the info plist so let's go over to the solution explorer again info plist and here we're going to add a new entry so let's click the plus right here and then i think you can just type the key names in here as well there is a weird thing going on here if you want to be compatible with ios 10 and earlier because they switched the key at some point between ios 10 and ios 11. so if you want to make sure that you're compatible with all the ios versions then you want to enter all of these keys basically so we're going to add the ns location when in use usage there we go and you can see whenever you hit the right one it will translate automatically to kind of a more friendly um description that is in this editor and here then you have to enter the message that you want to show the user like hey we would like to show you a map so you know you can kind of explain why you're requesting these permissions and what you're going to do with it so the user will know that it's not for nothing that you're not tracking them in the background or whatever but try to explain why you're doing this so that's one then add another and this is going to be ns location always and when in use usage description the names don't get any better than that um there we go so this is kind of like you have to look up actually what all these things are specifically but this is for when your location so when the app is in use probably and this is whenever you want to track like the user always and in the background so there's different descriptions for that basically i'm just gonna use the same message for now but you should probably look into the details for this one and then add a proper description for that so this is the ones for ios 11 and up if you want to be compatible with ios 10 and lower we also need to add these ones so let's add the ones for that here we go let me just actually copy this from somewhere here off screen so you don't have to watch me type all the time there we go and let's add the same description here and for the last one um let me copy that again here we go the ns location whoops there we go and with the same description okay so now we're all set for ios actually let's just see if this actually does something so i'm going to close this the app delegate looks good now here back in our example let's remove all the things that we don't need so let's just remove this and here we can start typing well let's do maps we need to have that little thing and i think it's a map and then with intellisense we can let that fix it for us use well essentials has something with a map too but in this case we want to use examine forms map so let's add examine forms maps and then it will add here this xml namespace maps with the namespace that we're after and the assembly that it needs to look for and now suddenly it knows about this map component so that is pretty cool and i think whenever we start running this now we should see a map so let's see if that actually works and here we go we have a map on ios that is pretty cool so you can see it it doesn't take a lot of effort to actually put this in here i think this is kind of the default location room for like you know where the location is you can influence the location on the simulator of course you can also test this on your actual physical device and it will use your actual location but you can also go into the simulator settings and simulate where the location is or i think you can actually simulate a route and that kind of stuff so that's pretty cool so and if you then go um here and we can say issue user so the map has a couple of these properties and we say true see then it also comes up with like the permissions that you want to use so you can say allow once allow while using the app don't allow well let's say while using the app and we should somewhere be able to see where um our user is right now let's see if i can trigger hot reload again and it will actually show me i don't know where our actual location is set to in this little simulator thing it should be somewhere here but anyway it should work it should work whenever you're going to test this it should show the little blue dot maybe a location is not set in my simulator thing we might see it show up in in android but you know and if you want to know more about these maps because there's a lot more to explore here please let me know in the comments of course this video is just about setting it up so you can get started with it but i'm more than happy to create any more videos on these maps now we've got ios done so let me hop over to the android emulator let me boot that up and we'll start implementing on android now before we actually go to the code on android for android we actually do need an api key to show that map so you have to go to your google developer console create a project if you haven't done so already and you need to get that api key for the google maps now a little disclaimer i'm just going to show you the keys and whatnot because before i'm going to publish this sample i'm going to destroy the api key so you hackerman's out there don't worry the api keys are safe so there's a documentation page on docs.microsoft.com which has a very good step-by-step guide on how to actually get that api key and this this fingerprints thing i'm going to get to that a little bit later it's important but i'm going to skip over it right now so i'm just going to go here with creating an api project and in the browser navigate to google developer console apis and services dashboard so let's just do that it should bring us to a new page i'm already logged in here and you can see i'm getting to a project that i have already set up just for the sake of the sample let's set up a new project you can do that here and we can just say new project here in the top right and whenever we do we get taken to a new project and you can see i have a lot of projects so i i have to delete a couple probably but i'll just make this the xf maps sample project there we go for no organization so let's click create and that's how easy it is basically to set up a project we need to wait for a little bit for that to happen because this is kind of similar to you know azure it has to get all the resources ready and here we can just say select project and we'll be taken to our new project so here we are this is our new project and then here near the top you can see enable apis and services so let's click that and here you can then search for all kinds of services so you can add a lot of more services here because you know google has a lot of things and you can get all the keys and whatnot from here luckily the one that we are after is right here maps sdk for android so let's just click that one and that will be added to our project whenever we here click enable you can go through the documentation here but that's only you know not very applicable to us because we're doing it for android but we're using xamarin and i doubt that they have a big documentation on how to do it on xamarin for you so i'm just going to show you that so now we have enabled this api on this project and the thing that you're after is here on the left under credentials and whenever we click here we can create new credentials which is basically your api key so let's click on create credentials here near the top and you can choose different right for different scenarios you can also do help me choose but you can create a simple api key which might not always be the best option or a oauth whenever you are going to authenticate with the users account or a service account well there's lots of options we're just going to go for the api key and it's going to create one for us and actually that's it boom we have an api key we can just use this one now let's click the restrict key here just to show you the options for the sample you know i might not be able to implement all the options but if you're going to use this in production it's very important to look into this so click restrict key and this will take you to a page where you can give it a name so you know what the key is for right you can see the actual api key and what happens or when it's created but you want to restrict this to a certain android app maybe and that is where kind of like the fingerprint thing comes in that is described on the microsoft docs page so you want to get that fingerprint then you can add that here so that the api key will only work for that fingerprint so only apps that are assigned with that fingerprint can use that api key which is very safe and whenever someone even gets the other api key they're not able to use it without signing it the same way which is a completely different thing that you should store in a safe way as well so that is something that will make it very safe you have some other things with like you know restricted for certain ip addresses or certain from certain http referrers you can do a lot of things here but the thing that makes the most sense is android apps in this case i'm going to set it to none and you can do some other things here as well api restrictions so you can select the apis that this key can call because i think this api key will work for a lot of services and here you can just say okay i want to just have this for the maps sdk for android so they cannot do any other stuff now also what you want to do is also described in doc docs page so find that link in the video description below is set it up for billing because you know you have a free tier which has a certain amount of requests which is fine for the sample but whenever you're going to run this on production then there might be some cost so you might want to check that out set up that billing so that whenever you hit that limit then maybe the services for maps is shut off and your users will be presented with a blank screen which is not great so you might want to definitely check that and set that up as well now actually let me well we'll remember that this api key is here right and i'm just now going to go over back to visual studio and implement this into android so here we are back in visual studio 2019 i've booted up the android emulator and i tried to run it and you can see that it will give me a runtime exception whenever you try to access the map it will say api key not found so that is exactly the thing that we needed right so let's have a look at how to implement that actually it gives you the exact thing that you need here so check that metadata name api key value your api key is in the application element of androidmanifest.xml so let's just actually copy this key from here and then stop this from running and then i go to my solution close ios for now open android and i'm going to go to the properties folder and to the android manifest and i'm going to say open with source code editor and i can directly edit the xml because the thing that i'm about to do is not supported by the graphical editor that we've just seen and here we have that application node that it was telling us about so let's just add a couple of enters here and then we can add that key that was given to us by the exception so we need this one with our api key so let me just grab that here off screen from the console that we just seen and put that in here and now we have our api key set up so that's how easy it was right so that's how you enter the api key and then whenever we go to our solution we also need to have that little line of initialization code that we also had for ios so let's go into our main activity and here we have essentials we have forms and so we also have examine i think it's kind of the exact same line forms maps dot init only the parameters are a little bit different so we probably have to just mimic whatever is in here this and save instant state there we go and that's how we initialize this on android there is one other thing that you need to do on android actually back in the androidmanifest.xml which is i'm going to again copy something from the documentation page that we've just seen so we need to add this little line um which enables the apache http legacy library to be very honest i don't really know what it does and this is only required whenever you target api 2028 and higher i think so apparently this is something that is removed from like android things but it's still needed by the xamarin forms maps library so you need to enable this for it to actually work at this time so just copy it in here again in the application node and it should just work there are a couple of optional steps that you can take according to the dark space that we've just seen which has to do with permissions so it says like if you are running on api 22 or lower then you might need the external right to external storage permission so i'm just going to copy that in here probably because it has to do with some caching with the tiles that google maps writes to your external storage i don't know and that changed somewhere along api 22 so if you're targeting api 23 or higher then this is not required but um yeah i mean the permissions are something that you want to be aware of you don't want to just ask for too much permissions but you know this is one that's probably used for something else as well whatever you're doing so this might be one that is safe for you also you know if you want to show the user's location as we've just seen for ios you also want to add the permissions for that so um let's just i'm just copying some things here so let's just add the permissions to which asks for uh the course location and the find location so basically like the the overall location and the precise location of the user um so we want to request that from the user and of course whenever you're going to target android now you also have to handle the runtime permissions i think you can actually do that with xamarin essentials as well with the permissions api but in the docs again they're going to describe a little bit different so in our main activity they say we want to add some fields here there we go so let me just add that to our class here and get the indentation right oh it doesn't know these usings using android so there we go let me get this indentation right here so this is request location id so this is probably some id for our permissions request and this is the the permissions that we're actually requesting so this is again the course and the file location that we've just seen in our xml file as well and to actually you know start requesting these um then we need to override the onstart so let me just put that in here and it's going to check like if the running version is above 23 that's the only case where we need to do it we are going to check these permissions do we already have it or not and then we're going to say we're going to request the permissions and if it's already granted then you know we don't need to do anything basically i think while scrolling here you could also see that you know here we have the xamarin essentials things already going on they also say in the docs that we need to do another step which is actually in this onrequestpermissions method so there is something which is kind of interesting if you want to combine all these things let me just paste it in here and we'll figure it out so this is the code that we actually want to get in here and there are some interesting things going on here so if the lot display message or not um else we're gonna do that so i guess we just want to have um oh this else doesn't really go well with the um messages right here okay so this is basically for your scenario where you want to detect if the user has given the permissions yes or no and you want to display a message so i'm not really going to implement that right now but this might be good to check if you know if this is uh the result is coming back from like the permissions and um here you can see like hey if the request code so this is invoked by the os actually and this is going to get that request code so this is the thing that we've seen here right that request location id that is used here so this request code is that our request location id if it is then we know that this is the permission that we are actually asking to the user and then we're going to see is it granted yes or no if it's granted then you know all is good if not then you want to display your message like hey you denied the permissions that we are actually using which is not great so what we probably might want to do here then is also do an else for whenever you know it's a different request code here for all the other request codes we are just going through the essentials thing and call the base class and that is kind of it again i think there's a better way to do this with the essentials apis but this is you know how it is documented in the docs that we've just seen so for android a little bit more extensive but let's see we should be able to run the code right here and we should be able to see a map on android as well here we go our application is starting and please show up please your map please show a map it's taking a little bit oh there we go we have our permissions request so allow only when using the app which is fine and here we can see also in rome so that is great we have our map right here we can zoom out we can zoom in let's see for a little bit what we can now do is showing um user oh actually it is showing the user so but i'm not sure where the location is set for um for this emulator because you know also on android you have to specify a location so i don't think i have that oh there we are there we are we can see the user's location actually i think i can just press this one and it will go to the to the user location see we're at the microsoft campus so that is great that is awesome um and that is how you implement maps for ios and android with xamarin forms maps it can be a bit tricky to set it up especially on android for uwp it's a little bit like in between so it's not as easy as ios but not as hard as android but i hope i've shown you all the bits that you need to set this up in your own project if not please let me know in a comment below and i'll be trying to help you or join the discord server that's also down in the video description other than that i would like to ask you what do you want to know about maps because you know there's a lot of use cases i think some people already asked for some things with maps now that i got this out of the way you know initializing the map i'm happy to take any other requests that you might want to see about map so please let me know in the comments and i'll be sure to make a video on that for now please just like this video if you've liked it subscribe to my channel if you haven't done so already and i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 7,412

Keywords: xamarin forms, xamarin tutorial, xamarin forms tutorial, xamarin forms 101, maps in xamarin forms, xamarin forms 5, xamarin tutorial for beginners, google maps in xamarin forms, xamarin forms tutorial for beginners step by step, xamarin forms app, xamarin forms ui, xamarin forms tutorial for beginners, maps xamarin forms, xamarin maps, google maps xamarin forms, xamarin forms maps, xamarin forms maps tutorial, xamarin forms map control, xamarin forms maps android, Maps

Id: rgOwa7TQvIU

Length: 24min 44sec (1484 seconds)

Published: Thu Jun 10 2021