Tuesday, May 8, 2012

How to Use Google Maps in Android Application


How to Use Google Maps in Android Application



This tutorial demonstrates how to display Google Maps in an Android application.

Download Google APIs

To use Google Maps in your application, you need to download specific Google APIs. If you already downloaded the Google APIs then skip this step otherwise follow these instructions to download the updated Google APIs of your desired version.
Start SDK Manager from the Android SDK folder on your computer. Click on the Available Packages.
Click and expand third party Add-ons folder. You will see Google Inc folder. Expand this folder and select the desired version of APIs you want to install.
Click on the "Install Selected" button at the bottom, to install the APIs.
Android SDK Manager

Create Virtual Device

Next you need to create a specific virtual device that uses the Google API of your desired version. To create the virtual device, click on the "Virtual Devices" option in the left menu.
Click on the New button to create a new virtual device. Enter appropriate name for your virtual device. Select the desired version of Google API from "Target" drop down. Input some value in Size text box and click the "Create AVD" button to create the virtual device.
Upon successful creation select the newly created device and click the "Start" button to start the virtual device.

Get Google Map API Key

The next step is to get the Google Map Api Key. To get the key visit Google code project athttp://code.google.com/android/add-ons/google-apis/maps-api-signup.html . At the bottom of the page you will find a text box to input MD5 fingerprint.

You can get your certificate's MD5 fingerprint from your local machine. To create MD5 fingerprint you need to run "Keytool"  utility that comes with the JRE.
As you are working in development environment, first you need to find the location of debug certificate. In Eclipse, click Window -> Preferences -> Android -> Build.  You can see default debug keystore. Copy it to clipboard.
Now open the command window and type following command at command prompt.
keytool -list - alias androiddebugkey -keystore "Path to keystore debugkey" -storepass android -keypass android
Replace the string "Path to keystore debugkey" in above line with your computer's path of keystore debugkey. Now press enter and keytool utility will create the fingerprint and display it on the screen - copy this finger print.
Go back to the Google code project web page (you opened in the above steps) paste or type your MD5 finger print in the text area  for "My certificate's MD5 fingerprint:". Press "Generate API key" button.

It will generate the API key and bring you to the next page. You need to sign in with your Google account.
 
In the above image you can see the generated key and the sample code for your android application's layout xml file. Copy the sample code for your generated key so that you can use it in your application.

Android Application

Now open the Eclipse and create a new Android project. This time for "Buid Target", select the "Google APIs" of your desired version. Fill rest of the fields and create the project.
Open the main.xml layout file of your project and make changes according to the code given below. Remember to replace API Key with the key you generated using MD5 fingerprint from your computer.  Assign a unique id to your map view, as you will access it from the application code. If you want your map to be interactive and clickable then set its clickable property to true.
The final xml layout file should be looking similar to the following code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<com.google.android.maps.MapView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/my_map"
android:clickable="true"
android:apiKey="0WkC5ANoCR9utisPeoO17OlP7TxcKAFwQovvgiQ"
/>
</LinearLayout>
Now open AndroidManifest.xml file. You need to add internet permissions to your application, as your application will use internet to access the map. Add following line of code to your manifest file.
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
You also need to include the Google API. Add following line under the application tag.
<uses-library android:name= "com.google.android.maps" />
Here is the sample code of updated manifest file.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.alam.android.mapapp"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="10" />
   
   <uses-permission android:name="android.permission.INTERNET"></uses-permission>
   
    <application android:icon="@drawable/icon" android:label="@string/app_name">
   
  <uses-library android:name= "com.google.android.maps" />
   
        <activity android:name=".MainActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

Now open the MainActivity.java and extend it from the MapActivity, instead of Activity class.
public class MainActivity extends MapActivity
If you get any errors, import the MapView and add the un-implemented methods. At this point your application is ready to run and display a map in the emulator.
If you want to add a built-in zoom control to your map then go ahead and follow these instructions.
In the onCreate method, get a reference to MapView that is defined in the xml layout file.
MapView mView = (MapView) findViewById(R.id.my_map);
Set the built-in zoom control by calling
mView.setBuiltInZoomControls(true);
Final code for MainActivity.java
public class MainActivity extends MapActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
      
        // Get a reference to MapView
        MapView mView = (MapView) findViewById(R.id.my_map);
        // Set the built-in zoom control
        mView.setBuiltInZoomControls(true);
    }

 @Override
 protected boolean isRouteDisplayed() {
  // TODO Auto-generated method stub
  return false;
 }

}

No comments: