Introduction: Google Maps API for Android

Hi There! Is your Android app lacking pizazz or direction? Adding Google Maps is an excellent way to take your app from dull to distinct. But how does one make this transition? In this tutorial, I will walk you through the process of configuring and implementing Google Maps in your Android mobile and wearable applications. Feeling up the challenge? Then let's get started!

What you will need:

Required:

  • 1 - Smartphone with Android operating system
  • 1 - A copy of Android Studio
  • 1 - A Google (Gmail) Account

Optional:

  • 1 - Android wearable device

Once you have all these things, head over to the first step...

Step 1: Setting Up

Before diving into Google Maps development, there's a couple of things we need to set up first. Some pertaining to software, some pertaining to hardware...

On the software side of things...

Android Studio:

To begin development using Google Maps you must first have Android Studio installed.

If you're asking yourself: "What is this Android Studio you speak of?" Then head over to the Android developer website and get yourself a copy of this nifty tool for free.

Google Play Services SDK

You will also need the Google Play Services SDK package for Android Studio. While installing Android studio, it should give you an option to install the package. If not, Google has an excellent guide on installing and configuring the Google Play Services SDK on their developer website. You can check out the guide here.


On the hardware side of things...

If you haven't already taken the Android programming plunge before, then chances are you'll need to set up a couple of things on your device before getting started.

Enabling Developer Options:

On your device, head over to:

Settings > About Tablet

Scroll down to the very bottom of the page and tap on the Build numbersectionseven (7) times until you see a little popup window informing you of your new status as an Android Developer.

From there, back out to the main settings screen and you should see a new section at the bottom of the page called Developer options; click on it.Make sure that Developer options is turned on at the top of the screen.

Once enabled, there's one more thing you need to do. On the Developer options page, find a section called USB debugging and make sure that it is set to enabled.

Once you have all this set up, let's create our first Google Maps Project!


Step 2: Create a New Project

Are you excited to start working with Maps yet? If so, then let's continue!

New Project:

Our Google Map endeavors deserve their own space, so let's create a new app! There's a couple ways you can go about it:

  • Follow this guide! :D
  • Create a new one yourself.
  • Import the included .zip project into your Android Studio.

For this tutorial, we'll start fresh and create a new project in Android Studio. Start up the editor and when the welcome screen pops up, click:

Quick Start > Start a new Android Studio project

When the new project dialog comes up, choose a name for your app (you can leave all the other fields as-is). I'm calling mine MapsPlayground. Once you've chosen a name, click next.

Target Android Devices:

In this next screen, select the correct SDK that you would like you're app to compile with. If you have a newer phone, or plan to use Android Wear, then make sure to select API 21 or higher.

In this tutorial, I'm going to show you how to develop for Google Maps on both mobile and wearable platforms. So, I'm choosing API 21.

If you're feeling adventurous, then try out Android Wear! (if you're feeling apprehensive, don't worry. I'll guide you through every step of the way :D)

When you've chosen your target SDK, click next.

Add an Activity to Mobile:

Here, Android Studio gives you the option to let you add some initial elements to your app. Because this tutorial is building from the ground up, we'll go with a Blank Activity.

Click next to name your activity.

Customize the Mobile Activity:

On this next screen, choose a name for your activity. For this tutorial, the default MainActivity is good enough for what we need.

Click next.

(optional) Add an Activity to Wear:

If you chose to incorporate Android Wear into this app, then awesome! Here you can pick the type of activity that will be automatically generated by Android Studio. Just like the mobile side, I'll be choosing a Blank Wear Activity to demonstrate Google Maps from scratch.

(optional) Customize the Wearable Activity:

If you added a wearable activity, then go ahead and name it here. To make the Activities easily distinguishable, I'll be changing the wearable activity name to MainWearActivity.

Click finish to create your app!

Build...

After clicking finish, it might take a little while for Android Studio to initially compile the project. Feel free to take a break and grab a cup of tea (or coffee if that's your thing...). By the time you come back, you're project will be built and you should see this:

INSERT IMAGE

Now that we've got all that set up, we are really close to starting development! In the next step we'll configure our project to work with the Google Maps API.

Attachments

Step 3: Configuring Google Maps API

If you've made it this far, awesome! The process we will do here to configure our app is exactly the same for each app that you create that uses the Google Maps Android API. It seems tedious at first, but after a little repetition it becomes second nature. This section is EXTREMELY important, so be sure to pay attention to each step!

API Keys:

In order to use the Google Maps API, you need to configure your project with a couple of different API keys. To do that, you need to register your app on the Google Developers Console (don't worry, its free :D).

First, we need to get your app's certificate information. There are 2 different types of certificates, a debug certificate and a release certificate. For this project, we only need a debug certificate because we are not releasing our app on the Google Play Store (yet...). Obtaining the debug certificate depends on the type of computer you have. Follow the steps below for your operating system:

Mac and Linux:

Open a terminal window and navigate to:

~/.android/

List the SHA-1 fingerprint:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Windows:

Open a cmd window and navigate to:

C:\Users\your_user_name\.android\

List the SHA-1 fingerprint:

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

After running the commands above, you should see output similar to this:

Out of all that seemingly meaning garbage, make sure to hold on to the line that begins with SHA1. We'll need that string when we register on the Google Developers Console.

Create an API Project:

Now that we have our app's debug certificate, we can register our app on the Google Developers Console. There are two ways of doing that:

  • The Console will actually guide you through the process of activating the Google Maps Android API. If you want this route, follow this link. Once you have activated the API, skip to the next step!
  • You can activate the Google Maps Android API yourself. To do that, follow the steps below:

Head over to the Google Developers Console, and sign in with your Google account.

Create a new project and give it a name of your choosing.

Once the project is created, look over to the sidebar on the left side of the window. There, click:

APIs > Google Maps Android API > Enable API

Once added, go back to the left sidebar and click:

Credentials > Create new Key > Android key

There, copy/paste the SHA1 line from the commands we ran earlier into the window so that the output looks similar to:

INSERT IMAGE

Make sure to copy the API key that the Console gives you. We'll need that in our next step!

Next, we need to configure our manifest with these shiny new API keys. When finished, head over to the next step!

Step 4: Configuring AndroidManifest.xml

This is the final stretch to implementing our Google Maps app. Just one more step to go!

Now that we have all those API keys configured on the Developers Console, we need to shift gears and configure the AndroidManifest.xml in your project. So what are we waiting for? Start up Android Studio and open your AndroidManifest.xml. (if you have an Android Wear module too, then open that manifest as well and copy the code below into both files)

Just inside the element, add the following as a child of :

<meta-data 
    android:name="com.google.android.geo.API_KEY"
    android:value="API_KEY"/><br>

Replace the API_KEY value with the API key that you got from the Developers Console.

Specify the Google Play services version number by adding the following as a child of :

<meta-data android:name="com.google.android.gms.version"
           android:value="@integer/google_play_services_version" />

Add the following permissions as a children of the element:

<uses-permission android:name="android.permission.INTERNET"/><br><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>                <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

One last thing, Google Maps requires OpenGL ES to render the maps on screen. We need to specify this external service as a requirement in the manifest. To do that, add the following element as a chile of the element:

<uses-feature
    android:glEsVersion="0x00020000"        
    android:required="true"/>

Excellent! When you've pasted in all that code, the completed result should looks something like this:

INSERT IMAGE

Now rebuild your project by going to:

Build > Rebuild Project

Congratulations! You have just completed configuring all the necessary Google Maps API requirements. You are one step closer to becoming a Maps developer. :D

Ready to dive into the code? Head over to the next step and lets get coding!

Step 5: Google Maps for Mobile

Great job for making it this far! In this section we'll cover how to add Google Maps to your mobile application. Getting excited? Let's get started!

Concept:

Google Map layouts for Android is based extensively on fragments. Instead of creating your own, the Google Maps API includes them with the majority of the backend done for you. As the developer, all you have to do is manage their lifecycle, layout, and interaction. I'll cover all of these topics below.

Layout:

Adding a Google Map to your app is very simple. Because the Maps are fragments, you can inflate them into virtually any ViewGroup that you want.

To start, open up activity_main.xml and remove the default TextView that is placed in the layout. Instead, drag and drop a FrameLayout in its place. Give the FrameLayout an ID called "mapContainer". Your completed layout should look like this:

IMAGE HERE

Lifecycle:

If you are familiar with fragments from any previous development experience, then you understand how great they are. Google Maps is no different. The API provides a fragment class called MapFragment that can be manipulated to your liking. Also, because they are fragments, that means that part of their lifecycle and their layout manipulation is handled via the FragmentManager. Pretty cool huh?

Here, is where things get interesting. Open your MainActivity.java. At the top of your class declaration, implement OnMapReadyCallback and then import the method:

public class MainActivity extends Activity implements OnMapReadyCallback {
...
@Override
public void onMapReady(GoogleMap googleMap) {}
...

This callback will trigger when your map is ready to be used. We'll get to that in a minute.

Now create two private member variables to your activity; one for the GoogleMap, another for the MapFragment. Your code should look like this:

private GoogleMap googleMap;
private MapFragment mapFragment;

Now in your onCreate() method, lets create the fragment. To do that, do the following:

...
this.mapFragment = MapFragment.newInstance(); // Initialize mapFragment object.
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.add(R.id.mapContainer, mapFragment); // Inflate mapFragment inside the FrameLayout.
ft.commit(); // Commit the transaction.
this.mapFragment.getMapAsync(this); // Sets MainActivity as OnMapReady callback listener....

In order for us to be able to edit our map later on, we need a reference to it once it has been created. So, add this code into your onMapReady() callback method:

this.googleMap = googleMap; // Initialize the local GoogleMap object.

That's it! We have implemented all the callback listeners that we need and now have a reference to our GoogleMap object. Go ahead and try running your app at this point. You should see your map inflate into the FrameLayout inside your activity_main.xml.

Interaction:

Now that we have a reference to our GoogleMap object, there's a lot of cool things that we can do. I'll show you a few examples.

Drawing a Marker:

Say you want to mark a point on the map. The API allows you to create markers with optional content inside them and place them at a given location. Try this in your app for placing a marker:

...
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(new LatLng(-12.34, 56.78)) // Place marker at given lat/lng.
        .visible(true) // Make the marker visible.
        .title("hello world") // Content of the marker.
        .icon(BitmapDescriptorFactory.fromResource(R.drawable.blue_dot)); // Custom icon.
Marker currentMarker = googleMap.addMarker(markerOptions); // Add marker and save.
...

Drawing a Path:

You know how directions in the actual Google Maps app draws your route on the map? Well with reference to your map object, you can do something very similar using a neat object called a Polyline. Polylines allow you connect the dots between multiple latitude/longitude coordinates on the map. Here's an example of a method that you can also put in your app:

...
// Updates route path on map with a given location.
private void updatePrimaryPath(LatLng current) {
	PolylineOptions options = new PolylineOptions(); // Create new polyline options.
	options.color(Color.RED).width(5).visible(true); // Polyline attributes.
	if (lastLatLng != null) {
		options.add(lastLatLng); // Add coordinate to polyline.
		options.add(current); // Add coordinate to polyline.
		googleMap.addPolyline(options); // Draw polyline on map.
	}
	lastLatLng = current; // Set the last used position as the current one.
...

Centering Camera On a Location:

One last thing that you can do with the map that will be readily useful in your programming endeavors is centering the camera on a specific latitude/longitude coordinate. This allows you to automatically shift the view of the map to different spots with different zoom levels. Here is some implementation to get you started:

...
// Center the map on a specified location with a desired zoom level.
private void centerMapOnLocation(LatLng loc) {<br>    googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(loc, ZOOM_LEVEL));
}
...

There are tons of things that you can do with the Google Maps Android API. When you feel comfortable with the basics, feel free to get explore the API and add new functionality to your app.

If you incorporated Android Wear into your MapPlayground app, then head on over to the next step to learn about the Google Maps API for Android Wear. Otherwise, skip to the last step!

Step 6: Google Maps for Wear

Welcome adventurous ones! This section is for those brave souls that ventured into the uncharted territory of Android Wear. Congratulations on making through each step of the tutorial :D

This section will touch on the Google Maps API implementation for Android Wear. Feeling up to it? Great, lets get started!

Concept:

As I'm sure you've guessed, Android Wear is a relatively new mobile platform designed for wearables. What's really cool about Android Wear, is that development for it is nearly identical to the traditional Mobile platform. So, all the development we just did in the previous step for Google Maps on Mobile is exactly the same for Android Wear!

In light of the dominant parallelism between the two platforms, I'll focus on a few key elements that really only pertain to Android Wear.

Layout Design:

When incorporating Google Maps into your Wear app, ideally, you want your view to be immersive. The problem with that is the user cannot use traditional swipe-to-exit gestures to quit out of the map. Luckily, there is a nifty little tool we can use called a DismissOverlayView that, when invoked via a OnLongClickListener, overlays the entire view with an exit button. To use DismissOverViews there are two components, the layout placeholder and the Java implementation. Check out the implementation for both below:

<!-- Place this DismissOverlayView anywhere in your layout for it to be called. -->
<android.support.wearable.view.DismissOverlayView
    android:id="@+id/dismiss_overlay"
    android:layout_height="match_parent"
    android:layout_width="match_parent"/>
// Set up DismissOverlayView in onCreate().
mDismissOverlay = (DismissOverlayView) findViewById(R.id.dismiss_overlay);
mDismissOverlay.setIntroText(R.string.basic_wear_long_press_intro);
mDismissOverlay.showIntroIfNecessary();
...
// Show the DismissOverlayView when map is long-pressed.
@Override
public void onMapLongClick(LatLng latLng) { mDismissOverlay.show(); }

Step 7: Wrap Up

Summing it all up, we've seen how to set up and configure Google APIs with new projects, and implement the Google Maps API on the Android Mobile, and the Android Wear platforms. Now you have all the tools you need to begin development for Google Maps on Android Mobile and Android Wear!

I hope that this tutorial has helped you learn about Android development; increasing your skill set and confidence in developing more complex apps in the future. Exploring new topics is fun and exciting and I hope that by learning Google Maps you have broadened your creativity horizons.

cheers!