Lessons

Lesson Info

Displaying a Map View

is when we get to the interesting stuff when we get to see a map for you on the screen. So our map view will look like this or the view that hold our map. You will look like this. We're gonna have, ah, a big piece of text that the user can enter an address into, and then they'll be able to search for that address. And that will hit Google's AP I when they click map, address, map this address and then when we have results, we're gonna we're gonna just blindly. This is I mean, this isn't the best user experience because it doesn't handle any edge cases. Um, I'm just gonna get a result set of results back and assume that I'm going to get a set of results back because I have the luxury of being able to make sure I search for addresses that I know exist. Um, but that will keep the code simple for us to understand how things work and I'll leave ever leave fixing edge cases as a exercise for the viewer. But when we get the results, I'll just pick the 1st 1 off the the array of results that we...

get And then I will zoom to that location on the map and ah, that will. And then we're gonna put a marker on the map, which will be a lot of fun, too. And then the user conflict use this location and then the whole process that we talked about in the last step will will fire off, and it will pass the the address back to the previous screen. So let's talk about the A P I key a little bit for anybody who wasn't up to speed on that on that conversation. I'm not actually going to get it on a P I key right now, Um, because that is ah, an involved process. And I have that all posted in the forums. Um, but here are some links that you can use to get to the A P I key, um, process where you can Ah, what you do is put in the key signature of a debug key that this sdk creates for your on your machine or that you can share between developers. And I'll show you how to do that in one second. Um, but the process is basically this. You do something like give me the the key. The signature of the key tool. I'm sorry. The key that's created use this key tool. Um, application, at least on Mac. And I think they're instructions for windows up there, too. I didn't go through those because I don't have access to Windows machine, but at the end of that process that they take you through, you have a keeper are a fingerprint of that key, and then you come down here to generate a P I key off of that fingerprint. You have to agree to such terms of service and stuff, and then you will get a key. And, um, you will put that key either into the XML of a map view or into, um, you can do that. Also, programmatically So that is the process that I went through to obtain some keys that you will be seeing in the code in a little bit. And then, um, back to our application the steps that we need to go through our to add, um uses library to the manifests. And I'll show you that in a second. That's very important, because if you don't, you'll get some really weird errors that that Beth and I had to had to sort of go through for about 15 minutes when we practiced this course, I forgot to add that uses library at the right time. And there was some word errors that that weren't quite what you'd expect them to be. Then you create a map activity, created that view, and we'll put the depo key in the code. So let's get on that first things first. Let's go to the manifest. Now, here is what you need to do to say to the android sdk that you want to include, um, Android Maps in your application. You need to put in this code uses library, conduct Google that android maps. Now, remember when we set up, um oh, yeah, there was one other thing I'm gonna show you, So I'm gonna go to the preferences and eclipse by going to, uh, Eclipse preferences on the Mac. I think there's a different money for Windows. I'm not sure where it is, but should be pretty clear. So, um, first things first, let me show you about the debug key store. So inside my android set of preferences, um, in the build option. I have t I can I could choose where my debug key stories. And this is the default one that is created by the sdk the first time you set it up. Um but I would I could also do is ship this depot key store to other developers on my team. And then I could specify a custom debug key store to use instead so that everybody is using the same debug he store. That way you could use the same map, a p I key. That's the only way I know to get around everybody having to sit up and put into code some specific map a p I key. But when you ship the APP to production, you need to use a separate. You need to use a production ready key store. So that means once you get to the point that you are shipping your application into the marketplace, you need Teoh go replace all the keys in your code with the production ready key, and I just find that to be a really irritating process and especially given the fact that when you're in IPhone development, you don't have to worry about any of this, and you can still use the Google map. AP I. They actually have cut some sort of deal with Apple so that IPhone developers don't have to go to this process. So it's kind of irritating. The android developers have to when it's Google's platform. So that's my little rant on Do something that you have to deal with if you have maps in your application, but you can make it a little bit easier by sharing in debug key store at least during the the development process on a team. Um, but now here comes the point where we, um now that we're gonna use a Google map, um, in our application, Um, Now, here's the point where we're finally starting to use these Google Ap eyes right here. Um, so that's that's Ah, there was a lot of questions really on. I remember about why I would want to use the android sdk o r. One with the Google AP eyes installed or shipped along with it, and this is why you would want to do that. So, um, once these Google AP eyes are available, but by saying that your application uses them by compiling its that s decay. Then, um, you can use the library that comes along with that. Ah, the Google set of add ons to use the maps in this case. And you need to declare that inside the application tags inside your manifest, Otherwise you will get some weird errors. So now that that's done, um, there is one other thing that we need to do, um, to make the maps work. This will not cause any weird areas. You just won't see any map tiles if you don't, um, declare a permission. So permissions are basically notifications to the user that you will of user of your application that you're going to be using a certain set of functionality that they may or may not. I want you to use. So it's sort of like an implicit, um implicit. Ah, um, what's the word I'm looking for? Like they're giving you permission as an application developer to use the Internet on their device because they need t need Teoh by installing your application because they're going to see before they install it, that there's some permissions that the device requests that I'm sorry that the application requests and Internet is one of them. So this is saying to the user, Hey, by the way, this application uses the Internet. If you don't want that to go on on your device, that don't install it. So, um and this also makes it possible for us to call out to the Internet. And we need that against to load the map tiles off the Google A p I for the maps. So now that we have the Internet for mission set up and we have the maps uses library in our application, then we can start to build out our map activity. So the first thing we need to do is change this activity to a map activity and see if I still have problems. No, for some reason that works. Okay, so now Eclipse will import that for me. And that's in the com Google Android maps package. So you can see back in the manifests only sure that really quick, um, cop com Google Android maps that it's works along the same idea of a package structure here. So map activities now imported. And now I have an error on add location map activity because there's a couple things I need to implement. So if I hover hover over the class name, I can say add unimplemented methods. And the one method that I need is is route displayed. And this is a convenience method or sort of like a configuration method, I guess, for map activity to say whether or not the map view needs to display a route like a, uh, a like driving directions. So in our case, we could just say false. No, there isn't any route displayed. Um, one other one that we can implement is, um, is location displayed and we're gonna be using this next time. Um, because we're gonna be showing a ah user the location of the current device so I can put this in here now, and this will kind of give you an idea. There's a couple of these different configuration methods that I can set up on a map activity. Ah, to tell Ah, the sdk and the platform. How you're gonna be using the map that it's hosting. Okay, so now let's start to build out the view for our maps. Um, activity here. So, in layout, I'm gonna go right click this directory and say new file and I'll call this ad location. And now we'll have a new layout and let me just paste in all that code because you can see how we look expected to look right here. I'm just pasting in the code that will make this the case. I will save us a lot of typing and maybe a little talking to, um, because I just need to talk about one new component. So basically, it's a relatively out text view at a text. There is this new attribute that you may not have seen before, which is a number of lines that I want to show because looking back at the cops here, um, I want to add the ability for the user to type a few lines instead of just one line, because address is expected to be set up that way. Um, And then there's a button on top of the maps, which shows the address. And there's a button on the bottom of the map, which will use Teoh. Let the user, um, grab the current location displayed. Uh, I need add a few strings here really quickly. Map this address and use this location and I'm gonna re factor these guys into strings in this strings. XML. Now we have a map. This address keyed string, and we have a used this location keyed string. Okay, so those of the boilerplate bits that we've seen a 1,000,000 times before The next piece, though, is the map itself. So we haven't seen this before, just like we did last week. Um, we're referring to a custom view in this sort of format where you give the fully qualified class name of the component, and that is calm. Google Android maps, map view. Just like any other component. It's no different. I could give it a map. Their idea of map set the the widths and heights and, ah, set where it is. Ah, laid out inside the relatively out. Um, if I just want to display a map and not let the user interact with it, I can make clickable false, but that's not the case here. We want the user to be able to interact with the map. Some say clickable is true. And then here's where I put the a p I key. So what I've done, instead of trying to share a debug key between two different computers that work on this. I worked on this application in two different computers. I have ah kee for one computer here and then I put the one for the computer. I'm not working in the comments, and I just switched that back and forth. So that's also one sort of poor man's solution to dealing with the debug keys. But what I have here is I think this is the key that should work on this computer. If it's not, you'll see what things look like. If you get the wrong key, it doesn't fail. It just doesn't show any map tiles, which is probably confusing. So if you don't get map tiles, that's the first place to look. Okay, so now back in map activity, I have to associate this view with this activity. I'm going to do source, over rider, implement methods and then come to on create and I'll click. OK, and now we'll have the create that. I want this constant to be up here, though, so I'll move this up, do a little formatting and now on create. I want to show the map view. So I say, set content view. And with that to be our dot layouts dot my Arab sir, Add locations. Correct. And now let's do a quick smoke test on. Let this run so that we can see we have maps in the emulator. If we don't, then we'll get to figure out How did the book that? But I have faith had location to tasks. Here we are on our new map view, and there's a map with that. So that's a lot more fun than just showing tasks in a list, huh? And without that much more code. Okay, so, um, now, ah, we have, Ah, nice view that centered on the United States. But there's ah, not really much more I can do with the maps than Pan. Let's do a little bit more set up to the actual map view so that we can see Ah, a little bit more interesting functionality. Some going to going back into the activity and call my sort of default convention of said up views. And that method doesn't exist So I can hit command or cult F one to get this help and say, create methods set of views and then I'll come in here and grab reference to all those things that we got set up in the XML I need so far is the address text, which is Thea Task Address I d. That's where people can enter their address. They want to search for the map, this location button, the use location button. And then the map view comes next. And that is a map view from Congo Google android dot Maps. So import that import button again. It's not finding that that's strange. It's kind of irritating. But that's fine, because we can always fall back to doing things the old way where we had a hand code. Everything just paste in a little bit of import code of here, save some typing. Okay, Now those air imported, I need to create these fields so I can hover over here. Creative field for the for the place where the user imports are inputs. The address, um, application button use location button and the map for you. Okay, Now, I had that I have referenced. Let's set things up just a little bit. Um, first thing that I want to do is you'll notice back in the cops. Um, the use location button down at the bottom of the screen is disabled because we don't want toe. Let the user click that until we know we have an address that will get returned. So first things first I was set. Use this location button or use location, Button said. Enabled false so that that is what you do, just like in a lot of other languages to make sure that a user can interact with the button. Then, um, what I will do is give us one more set of controls on the map view. We're going to let the map view show it's built in zoom control so that we can zoom in on the map and as well as pan around. So let's just look at that to see that we've got things more set up the way we want, and we can play with the math a little bit more. So once this starts up, I can click add task, come here to add location to task. And now when I click on the map, view the zoom controls down here show up. It's like a zoom in. Let's ah, let's go somewhere more interesting. I know We've got somebody in Pakistan. Let's go over and zoom in on Pakistan. There you see the old inmate, which is a rude, I suppose, in Pakistan. So yes, so now we've got something that you recognize from using Google Maps, most likely on the Web. And it's on your mobile device and it's in your application, which is a lot. Have fun to play around with. Okay, so now let's get on to the next step where we actually call it to the Geo coder and get the application that the user searches for. So what I'm gonna do is when the application button is clicked. Just use the old set set on Click Listener actually wrote this code before theon click Thing worked. So have a lot of sample code that is still based on these view on Click Listeners, which is life. I showed you a lot of those because that's something that used to work. But now you can choose between the on click or these on click listeners on Click and XML. In any case, when the um application button is clicked, I want to call a method called map current address, and then they needs to be a protected method on the ad location map activity. And that is right here. I'm gonna move this for organization purposes up above set up views because I think it's more interesting. So what we want to do in map current address is First of all, we want to get the address that the user typed in out of the address text. So you do that by calling at get text, um, and then to string because get text just returned something called inevitable. And we've seen that before when we typed in task names, the next thing we want to do is get a geo coder. A geo coder is in. Ah, I'll see. You don't have to type in some more imports, do you coders in the android Google maps are the Google add ons to android, and but it's an android location package and again, a geo coders. What will use to search for an address to find a location? But you can also do what's called Ah, reverse geo coding, which is searching for a location to fine Um, anything that the service knows about as Faras addresses that air near that location Um, And now what we're going to get out of the Geo coder is a list of addresses, so Oh, my goodness. You know, what I'm just going to do is copy in all of my imports at once. I don't have to keep going through this dance on, and then you'll see, get kind of the idea of some of the classes were gonna be using in a little bit, uh, well curated this one. So that's when we're gonna create floor it. So we need a list of addresses which we're gonna get out of the geo coder. And the way we do that is to do this, Do you a coder get from location name, and that will take whatever the user typed in. And the second argument is that we want to get just one result, but it still comes back as a list so that we're gonna need to pull the first result of that list in any case. But you can see that Eclipse thinks this is an error because this actually throws an Iot exception. So when you add a try catch so it's catching any Iot exceptions, and there's really not much that we can do here. So I'm just gonna leave this in here. I mean, we could we could present, like, an error to the user and say, You know, um, something went wrong with the network, which is probably what happened. Try again later. Um, but I'm not gonna I'm gonna leave that as an exercise to the user. So next step, if the address comes back with some interesting information, here's what we're gonna dio We're going. Teoh, make sure that we've got some addresses, and if they we don't have any addresses, you would probably do something like tell the user we didn't get any results and then do something interesting. Possibly there. But I'll leave that again is an exercise to the user. Now, the next thing we want to do is put a point a little red dot that I have this up in the cops. I don't have it up in these cops. Um, I think that's in the next steps. In the next step, we're gonna actually put a point on to the map. Um, when we get to Thea Ah, the address that the user shows geo coded on the map with a little, uh, what's called an overlay. So I'm gonna leave that for, um, the next step. But when I do for for just for these purposes, what I want to do is store that address in a field. Um and so now we should be able to get that address out of the geo coder. Um, let's ah, look at the steps again and see if we've completed everything. Okay, so we've added the debug key to the code, so that means we could see the map, and then we set up the map view so that it is Ah, we could pan around and zoom in on. So I think we've actually completed these steps. I was getting a little bit of head of myself there because the next step we're gonna do is put a dot on the map, but I think we're ready to go on to the next step. So we've completed all of these steps. We have a map. You we're geo coding, the address that the user chooses, and we're ready to move on to the next steps. But if there are any questions about these, let's go over those now. All right, I do have Ah few questions related to what you've done. The first question is, is the key that you get for the Google maps? AP eyes that key Also good for other googly AP Google AP eyes or will it work across AP eyes? I'm not sure about that. I think it's just the Google map. AP I Okay, Um, if the user has no Internet connection at run time on the phone, is there a way to control or to detect that so that we can do something smart in our app? Yes, there is. There's something called a connection listener, I think. Look that up on the on the A p I. And then you can listen for whether or not the user as a connection or state changes in the connection. So perhaps running, and then all of a sudden they lose Internet connectivity. You'll get notified through this connection listener, and then you can take the appropriate action. All right. Um, can you initialize a map to an appropriate center and zoom level? So that say you wanted to initialize it on your house zoomed in so that you could see your street? Is that possible. Yes. Presumably, we won't be doing that today. But just know that you can Yeah. I mean, initialization is happening right here, Um or, you know, writing here. Wherever you wanna set that up, you can set what the default addresses and this default zoom zoom level and all that kind of stuff in. And in the next step, we're gonna be zooming in on an address when the user chooses one. You could just start off by zooming in on address or I'm sorry, A geo geo point. Got it. Okay, that makes sense. All right. Sara. Ruth, do you have any additional questions? What error or exception is returned if get from location, name cannot find the address. Um, I don't know if it returns there. I think it would just returned zero results, but let's look at the documentation here. I'll hover over it. An eclipse hit f two to give this focus, expanded a little bit and then zoom in slowly. Right, Beth? Yes, please. OK, looking good. All right. So here's the docks. The Java docks for get location from the error get from location. Name ah turns to rave addresses that are known to describe a named location such as Delic, Iceland or 1600 Amphitheatre Parkway. You know what? Let me copy that, cause I'm gonna be using that lit or airport codes. You concert for airport? Kind of. That's critical. The return addresses will be localized for the locale providing to this class instructor constructor so you could do some liberalization. Their returns? No or empty list if no matches were found or if there is no back and service available. Interesting. So if you can't find anything, it returns nothing or no. So, actually, my code is is bad there. I'm looking for if there are any results, but I should look for it. Should do a null check first. Um, because I get no results in Ikea. Anyhow, you deal with that later, but I don't know why they have this Iot exception in there, but there is some network involved, so I guess it could. Something else down in there is throwing an Iot exception. But if there's no back and service, it also just gives you a null. So you deal with I can't find that address. And Google is down in the same way, basically, in your code? Sure. Um, we'll show how well we put addresses on the map in just a second. So we fixed this code. Um, if no. Ah, where am I? In my check. So if no is not addresses and sizes zero. So this is this would be a more effective guard from the possible return types here. Okay, So it was that all the questions cool? Yep. That's right. Yes. Well, um, let's just look really quickly here. So if I go back to the desktop and hit settings in the menu and go look at the application, we have installed application manage applications. If I go Teoh, um, find the application that we have installed somewhere in here. A lot of stuff. This is. Well, this is fixed in 2.1. It doesn't. It only shows you third party area task manager. Okay, So permissions down here at the bottom of this view and here, and this is similar to what you've seen them in the marketplace. It will enumerates all the, uh, for missions that any app that you have installed, um, declares. So I guess you know that statements on it or that question sounded more like a statement. But yes, it knows how toe how to localize those, um, in a human readable way, Each permission that you choose.