Displaying Maps and going to a location in Android

One thing that you would enjoy in Android is the Maps, and in this article i would show how to display maps for you to start your map application.

First of all you need to get a API Key, and here a more detailed explanation, i suggest you to read the last link.

Then on your Manifest file, insert uses-permissions of INTERNET and ACCESS_COARSE_LOCATION, and uses-library of com.google.android.maps resulting in

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="<Your package>"
  android:versionCode="1"
  android:versionName="1.0.0"
>
  <application android:icon="@drawable/icon"
    android:label="@string/app_name">
    <uses-library android:name="com.google.android.maps" 
  />
    <activity android:name=".Main"
      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>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
</manifest>

Our main.java code

import android.os.Bundle;
import android.view.ViewGroup;

import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.GeoPoint;

public class Main extends MapActivity {
  private MapView mapView;
  private MapController mapController;
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    this.setContentView(R.layout.main);

    this.mapView = (MapView) this.findViewById(R.id.mapView);
    ViewGroup zoom = (ViewGroup) this.findViewById(R.id.zoom);
    zoom.addView(this.mapView.getZoomControls());

    this.mapController = this.mapView.getController();
    this.mapController.setZoom(16);
    this.gotoMyHome();
  }

  private void gotoMyHome(){
    Double lat = 22.312381*1E6;
    Double lng = 114.225242*1E6;
    this.mapController.setCenter(new GeoPoint(lat.intValue()
,lng.intValue()));
  }

  @Override
  protected boolean isRouteDisplayed() {
    return false;
  }
}

Quick Explanation
this.mapView = (MapView) this.findViewById(R.id.mapView);
- In this article we would use xml as our layout so we need to get our MapView element from our xml

ViewGroup zoom = (ViewGroup) this.findViewById(R.id.zoom);
zoom.addView(this.mapView.getZoomControls());
- Here we add a ViewGroup zoom component so that we could zoom in and zoom out our map.

this.mapController = this.mapView.getController();
- Next we get our MapController, A utility class to manage panning and zooming of a map.

this.mapController.setZoom(16);
- Zoom our map to level 16, you can set this between 1 and 21 but on the higher number (deeper zoom) it will depend if the map can zoom up to that level.

Double lat = 22.312381*1E6;
Double lng = 114.225242*1E6;
- Here we get the latitude and longitude near my home and we multiply it to a constant of 1E6 so that we can convert it to int which is needed by GeoPoint.
this.mapController.setCenter(new GeoPoint(lat.intValue(),lng.intValue()));
- Now we center our map to the GeoPoint or location near my home. Remember GeoPoint accepts integers only so we had to convert it.

Now our xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  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:enabled="true"
    android:clickable="true"
    android:apiKey="<your api key>"
    android:id="@+id/mapView"
  />

  <LinearLayout android:id="@+id/zoom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
  />
</RelativeLayout>

Quick Explanation
Here we created a MapView element and a LinearLayout for our zoom control. In this xml you should replace android:apiKey="<your api key>" with your api key.

Source Code
Main Layout of Displaying Maps
AndroidManifest of Displaying Map
Main.java of Displaying Map

References
Obtaining a Maps API Key
www.anddev.org

Update History
   Jan 17, 2012 - Visual Update