Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
Note: An Android device with Android 3.0 (Honeycomb) or higher, and that has Google Play Store installed, is required to use the course exercises. (Kindle Fire and Nook devices do not qualify.) Finished mapping apps can be deployed on Android 2.2 (Froyo) or later.
- Setting up the developer tools
- Adding required permissions
- Getting a Google Maps API key
- Importing and linking the Google Play services
- Setting a map's initial state
- Geocoding an address
- Getting the current location programmatically
- Adding map markers
- Handling marker events
- Drawing lines, polygons, and circles
- Adding maps to existing apps
Skill Level Intermediate
The Google Android SDK includes tools for drawing on the map. You can create circles, polygons and lines, and I'll start in this demo by showing how to draw a simple line between two points. In this version of my project, named Drawing Lines I've added two fields to the main activity class. They're called marker1, and marker2, and they're both data typed as the Marker class. Then, in the method where I'm adding a marker, I've added some logic.
This is the setMarker method down towards the bottom of the class. After creating the marker options object, I then take a look and see which markers have already been created. If marker1 is null, then I create it. But if that marker is already on the map, I check to see if marker2 is null, and if it isn't, I create that. And finally, if both markers have been created, I remove them and then recreate marker1 again. So now I'm going add a little bit of code that will be executed right here after I've created both markers.
And I will draw a line between the two markers. I'll place the cursor after the call to addMarker for marker2, and I'll type in a call to a new method that doesn't exist yet, drawLine. Then, I'll press Ctrl 1, and select Create method drawLine. Then, I'll Ctrl click and jump to the new method. If you're working on Mac, press Cmd and click. The first step to creating a line is to create an instance of the class PolylineOptions.
I'll type in the name of the class, and then make sure I have an import for it. And I'll name the object options, then I'll instantiate the object with the constructor method, new PolylineOptions. The PolylineOptions class is very similar to marker options, in that, it has a set of methods that you can call one after the other. Each of these methods returns a reference to the options object. And so you can daisy chain the calls to the methods and do them all in a single statement.
Going back down to my new method. I'll place the cursor on the next line, and notice I'm not placing a semicolon at the end of the line. I'm continuing the current statement. When you draw a line on the map, it's actually called a polyline, and it can have multiple segments. When you add two points you are drawing a single line. Three points would create two segments, four would create three segments, and so on. For each point, call the add method and pass in an instance of the lat long class.
There's also a version of the add method where you can pass in a set of lat longs all at once. But I'll just use the first version. The add method expects a latlong object, and I'll get that by calling marker1.getPosition, the method that returns the latlong of the marker. Then, I'll duplicate that line of code and for the second version, I'll set it to marker2, and I'll complete the statement. That's all the information I need to provide to create the simple line, and now I'll actually create the line and add it to the map by calling the addpolyline method of the map object.
Be sure to call addpolyline and not addpolygon. I'll pass in the options object, and the line will be added to the map. I'll run the application, and test this version. I'm working directly on the device, so you'll be able to see where I touch the screen. And I'll touch in one location and hold for a moment. That creates my first marker. I'll touch in a second location. And that creates the second marker, and adds the line. Now there are a couple of issues to take care of.
The first, is that the line doesn't appear to line up with the markers. It's a little bit too far down. And here's why. When you add a marker to the map, Google Maps expects the bottom of the marker to line up with the location. Not the center. And you can see this easily by going back to the Google Maps default marker. I'll go back up to my set marker method, and I'm going to comment out this line of code that's using the custom marker and uncomment the line that's using the default marker.
I'll run the application. And I'll once again add a couple of markers, and this time, the lines directly touch the bottoms of the markers, as expected. So if you want to use an icon, like my custom icon, that is expecting to hit the center of the location, you have to say so when you add the marker to the map, and here's how. I'll go back to my setMarker method, and I'll reverse my comments, so I'm using my custom marker, and then I'll add a method call to the MarkerOptions statement, of .anchor.
The anchor method expects two float values, and I'll pass in .5f, and .5f. Here's the logic. Imagine a rectangular grid, where your icon appears. A value of zero comma zero is the upper left corner of the grid. And one comma one is the lower right corner. So 0.5 and point 0.5 is the direct center of the anchor. I'll save and run that code. And let's see the difference.
I'll touch and hold once, touch and hold again and now the ends of my line directly hit the center of the target, as I want. Here's the second issue I'll describe and show you the solution to. I have a single line, but my code allows me to wipe out these markers and place two new markers. So when I touch and hold a third time, and then again, I'm actually creating another line and the first line is orphaned. So, I need to add code to make sure that I only have one line at a time.
Here's how I'll do it. I'll go back to my draw line method and I'll save a reference to the line that I am creating. With polyline line equals, and then I'll get the reference from the call to addPolyline. I'll be sure to add an import for that class, and save. Now, I need to be able to reference that line object in other methods. I'm going to take this declaration of the polyline and copy it to the clipboard.
Then I'll get rid of the class declaration here and then go back up to the top of my class and declare this as a field right after the markers. And that will cause the line reference to persist for the lifetime of the activity. Now I'll go back down here and add quote to the removed everything method. After I removed the markers from the map, I'll then remove the line, if you like you can set it to no, but it's not really necessary because the next time you call draw a line, the line field will be reused and the original reference will be released.
I'll run the application again, and I'll create an initial line, and then I'll create another new line. And so on and so forth. So now the code says you can only have one line at a time. Finally, I'll describe how to customize the appearance of the line. It's black by default, and has a width of ten screen-dependent pixels. You can modify both of those values when you create the line. I'll go back to my drawLine method, and I'll call two new methods of the PolylineOptions class.
First I'll call .color, and I'll pass in a color constant from the color class of android dot graphics, and I'll pass in blue. And then I'll set a width, and I'll use a value of five, The default is ten, so this will be half the default width. I'll run the application one more time, and there's my new line. I touch and hold, touch and hold and so on.
There are other things that you can affect about lines and other shapes. For lines that cover a large part of the planet you can set a line to being geodesic, meaning that it will follow the curve of the planet. And you can also set the z-index of the shape, affecting where the line appears relative to labels and other visual elements of the map. I encourage you to experiment with lines and other shapes that I'll show you in subsequent movies.