|Developing Google Map Application|
Apr 28, 2011
About This Article
Developing map based application is one of the must have product for new mobile devices. To develop map based application in Android, Google has provided map library as add on feature. This article explains about the map library and how to develop Google map based application in Android.
This article is intended for novice users who want brief understanding on Android programming. This article guides you step by step on developing Google Maps Application. It assumes that the developer has already installed Android and necessary tools to develop application. It also assumes that the develeopr to be familiar with Java or familiar with Object Oriented Programming concepts.
Android provides Google’s external map library “com.google.android.maps” as add-on for developing application based on Google API’s. Map library offers built-in map downloading, rendering, and caching of Maps tiles, as well as a variety of display options and controls.
This article assumes you are developing application using Eclipse IDE and Android plugin has been added in Eclipse IDE.
Installing Google API
Before starting developing Google Map Application, make sure that you have installed Google API add-on in Android SDK.
The Maps external library is not included in the standard Android library provided in the SDK. The Google APIs add-on provides the Maps library to develop, build, and run maps-based applications in the Android SDK.
To know whether Google API has been added in Android SDK, Launch the Android SDK and AVD Manager as shown in Figure 1.
In case the Google APIs are not already installed, you will have to manually install them.
Choose the “Installed Options” section to see what is already installed and the “Available Packages” to download the additional APIs. Figure 2 shows that Google API has been added in Android SDK.
Creating the Project
With all the necessary requirements met, let’s start with developing application.
First create Google Map Project in Eclipse IDE as shown in Figure 3. Give desired project name and select desired target as Google APIs. It is important to use the “Google APIs” as the target since this option includes the Google extensions that allow you to use Google Maps.
If you cannot see the Google APIs option then you need to install it as described in Installing Google APIs section.
Create AVD with Google APIs
After creating project you need to create device which supports Google APIs.
Launch the Android SDK and AVD Manager as shown in Figure 1. Select "Virtual devices”. Click the "New" button to create AVD. Dialog appears as shown in Figure 4.
Specify a name for the AVD and select one of the "Google APIs (Google Inc.)" target. Configure the other options and then click "Create AVD". New AVD for running the project has been created.
Obtaining Google API Key
Google map library gives Google map data for rendering the map. Since application access Google data, developer needs to register with Google web services.
Google Maps API Key is required for allowing Google API to access the web services which in turn provides the map data.
Registering for a Maps API Key is simple, free, and has two parts:
Extract the MD5 fingerprint of the certificate
To register for a Maps API Key, developer needs to provide MD5 fingerprint of the certificate that you will use to sign your application. Here we need to use two things.
By default, build tools create the debug keystore in the active AVD directory. The location of the AVD directories varies by platform:
You need to extract MD5 fingerprint using the keytool.exe application included with your JDK installation. This fingerprint is needed to apply for the free Google Maps key. The keytool.exe file is usually present in the %JAVA_HOME%/bin directory for Windows or $JAVA_HOME/bin for Linux/OS X.
Since we are developing and debugging application in debug mode, we need to sign the application in debug mode i.e. SDK build tools will automatically sign your application using the debug certificate.
To sign the application we need to extract the MD5 fingerprint of the certificate and for this you need to use the debug.keystore file. If in case you are not able to locate the debug.keystore file, you can select Windows < Preferences < Android < Build in Eclipse IDE to check the path. Figure 5 shows the debug.keystore path in Eclipse IDE.
Once you have located the keystore, use this Keytool command to get the MD5 fingerprint of the debug certificate:
$ keytool -list -alias androiddebugkey -keystore .keystore -storepass android -keypass android
For example: $ keytool -list -alias androiddebugkey -keystore "C:\android\debug.keystore” -storepass android -keypass android
Register the MD5 fingerprint of the certificate
The output of the keytool would be something like the one shown in Figure 6.
Copy the MD5 Certificate and open your web browser to http://code.google.com/android/maps-api-signup.html
As shown in Figure 7, agree to the terms and conditions of the Google API and enter the MD5 fingerprint of the certificate.
Click on the “Generate API Key” button to generate the API Key. The generated API Key is shown in Figure 8.
Now to access Google Map in your application, developer needs to modify the AndroidManifest.xml file with the following
You need to add the Internet permissions using tag element. The permissions required are:
You also need to add the Google map library using tag element. This is so because Google map library is not a part of the standard library.
The final AndroidManifest.xml file is shown in Figure 9.
As you can see is placed outside the element and element inside the element.
Now open the main.xml file present in the res\layout folder of the project. Developer need to use the element to display the Google Maps in your activity. Use element to position the map within the activity.
The modified main.xml is shown in Figure 10.
As you can see the Google Map API Key is entered in main.xml file.
Create GoogleMap Activity
Rendering map in the application is achieved by extending the MapActivity class instead of Activity class.
A MapActivity is actually a base class with code to manage the boring necessities of any activity that displays a MapView. Activity responsibilities include:
To extend from MapActivity we have to implement the isRouteDisplayed method, which denotes whether or not to display any kind of route information, such as traffic, satellite, street view information. We will not provide such information, so we just return false there.
Kindly have a look at the Google Map API documentation before proceeding. The GoogleMap class is shown in Figure 11.
For deploying the application on emulator press F11 in Eclipse IDE. The output is shown in Figure 12.
As you can see the map is rendered in the application as well as the built in zoom controls is added for zooming in and out of the map.
Changing Views of the Map
By default, the Google Maps displays in the map mode. If you wish to display the map in satellite view, you can use the setSatellite() method of the MapView class, like this:
You can also display the map in street view, using the setStreetView() method:
Figure 13 shows the Google Maps displayed in satellite and street views, respectively.
Displaying a Particular Location
Be default, the Google Maps displays the map of the United States when it is first loaded. However, you can also set the Google Maps to display a particular location. In this case, you can use the animateTo() method of the MapController class.
As shown in Figure 14, a MapController from the MapView is obtained. Then GeoPoint object is used to represent a geographical location. The latitude and longitude of a location for GeoPoint class are represented in micro degrees (stored as integer values).
To navigate the map to a particular location, we need to use the animateTo() method of the MapController class and setzoom() method to set the zoom level.
The output is shown in Figure 15. The GeoPoint coordinates represents the city of Mexico.
Adding Overlay Items
So far we have seen the map, but you may wish to create and add markers, layovers to the map to indicate places of interests.
We will now add marker to the map. First, we need image to indicate marker. Copy Figure 16 and add it into the res/drawable folder of the project. This is shown in Figure 17.
To add a marker to the map, you first need to define a class that extends the Overlay class:
In the MapOverlay class that you have to defined, override the draw() method so that you can draw the pushpin image on the map. In particular, note that you need to translate the geographical location (represented by a GeoPoint object, p) into screen coordinates.
To add the marker, create an instance of the MapOverlap class and add it to the list of overlays available on the MapView object. Figure 18 shows the final code.
The output is shown in Figure 19.
GoogleMap project files are shown below