勉強会

Google Mapを表示してみよう

MapActivityを使用して、Google Mapを表示するアプリケーションのベースを作成します。

以下、作成のポイントです。

  • Google Mapを表示するビューは、com.google.android.maps.MapViewです
    • 別ライブラリーなので、マニフェストにuses-libraryでcom.google.android.mapsの指定が必要です
    • インターネットにアクセスするので、マニフェストにuses-permissionでandroid.permission.INTERNETの宣言が必要です
    • Google Mapにアクセスするためにandroid:apiKeyの指定が必要です。勉強会/MapsAPIKeyを参照して取得してください。
  • Mapを制御するアクティビティは、com.google.android.maps.MapActivityです。
    • isRouteDisplayedを実装する必要があります。ルート情報を表示する場合はtrueを返します。
  • Mapのズームや表示位置の設定などは、MapControllerを取り出して行います。
  • Mapを拡大、縮小するウィジェットは、getZoomContollerで取り出して、好きな位置に配置することができます。

手順1: 新規のプロジェクトを作成する

  • "File -> New -> Project"を選択して、開いたダイアログで"Android Poroject"を選択して、"Next"ボタンを押します。
  • 開いたダイアログで、以下のように入力してFinishボタンを押します。
    • Project Name: hellomap
    • Package name: jp.hews.hellomap
    • Activity Name: HelloMapActivity
    • Application Name: ハローマップ
      map.001.NewProject.jpg

手順2: マニフェストファイルを設定する

パーミッションの設定や、ライブラリの設定を行うために、AndroidManifest.xmlを編集しましょう。

  • このアプリケーションは、インターネットにアクセスするので、manifestの子要素に、以下のパーミッションの使用を宣言します
    <uses-permission android:name="android.permission.INTERNET"/>
  • このアプリケーションは、MapViewを使用するので、applicationの子要素に、以下のライブラリの使用を宣言します
    <uses-library android:name="com.google.android.maps"/>
  • 上記の二つを追加したマニフェストファイルの全体は、以下のようになります。
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="jp.hews.hellomap"
          android:versionCode="1"
          android:versionName="1.0.0">
        <application android:icon="@drawable/icon" android:label="@string/app_name">
            <activity android:name=".HelloMapActivity"
                      android:label="@string/app_name">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
    	 <!-- 以下のuses-libraryを追加 -->
            <uses-library android:name="com.google.android.maps"/>
        </application>
        <!-- 以下のuses-permissionを追加 -->
        <uses-permission android:name="android.permission.INTERNET"/>
    </manifest> 
     

手順3: レイアウトを決定する

画面のレイアウトを決定するために、res/layout/main.xmlを編集しましょう。

このアプリケーションでは、上部に水平方向のリニアレイアウトを配置し、中に地図を表示するMapViewを配置します。

  • レイアウトのリソースを作成します。res/layoutのmain.xmlを開き、以下のように入力します。動作させる場合には、apiKeyの取得が必要です。勉強会/MapsAPIKeyを参考に取得して下さい。
    <?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:id="@+id/mapview"
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            android:enabled="true"
            android:clickable="true"
            android:apiKey=<取得したMaps API Key>
            />	
    </LinearLayout>
    

手順4: MapActivityを継承する

配置したMapViewの処理を呼び出すために、アクティビティのベースクラスをMapActivityに変更します。

  • srcの下のjp.hews.hellomapのHelloMapActivity.javaを開いて、Activityを継承している部分を、MapActivityの継承に書き換えますMapActivityをインポートするために、ctrl-shift-Oを押します。
    public class HelloMapActivity extends MapActivity {
  • 抽象メソッドのisRouteDisplayedを実装します。エラーの小さな赤いバツをクリックして、"add unimplemented methods"を選択するか、Sourceメニューの"Override/Implement methods"を選択すると便利です。戻り値は、felaseにします。
         @Override
         protected boolean isRouteDisplayed() {
             return false;
         }
    
  • プロジェクトを右クリックして、"Run As"->"Android Application"で実行してみましょう。MapActivityの初期値に設定されている地図が表示されます。
    map.002.DefaultMapActivity.png

手順5: Mapを拡大して表示する

このままでは、地図が大きすぎるので、拡大して表示してみましょう。ここでは、簡略化のため、固定の倍率と場所を設定してみましょう。

  • onCreateメソッドの中で、findViewByIdを使用してMapViewクラスを取り出します。MapViewをctrl-shift-Oでインポートします。
           MapView m = (MapView)findViewById(R.id.mapview);
  • MapViewからMapControllerを取り出します。ズームレベルと、表示する場所をを設定します。
           MapController c = m.getController(); 
  • コントローラを使用してズームレベルと、表示する場所を設定します。
           c.setZoom(15);
           c.setCenter(new GeoPoint(35455281,139629711));

手順6: ズームコントロールのViewを追加する

  • 地図を拡大縮小するウィジェットを、MapViewから取り出すことができます。
  • このコントロールをビューに追加することで、タッチするとプラスとマイナスのボタンが表示されるようになります。
             ZoomControls zc = (ZoomControls) m.getZoomControls();
             zc.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
             zc.setGravity(Gravity.BOTTOM + Gravity.CENTER_HORIZONTAL);
             m.addView(zc);
  • この時点で、ソースコードは、以下のようになっています。
    package jp.hews.hellomap;
     
    import android.os.Bundle;
     
    import com.google.android.maps.GeoPoint;
    import com.google.android.maps.MapActivity;
    import com.google.android.maps.MapController;
    import com.google.android.maps.MapView;
     
    public class HelloMapActivity extends MapActivity {
     
     	/** Called when the activity is first created. */
         @Override
         public void onCreate(Bundle savedInstanceState) {
             super.onCreate(savedInstanceState);
             setContentView(R.layout.main);
             
             MapView m = (MapView)findViewById(R.id.mapview);
             MapController c = m.getController();
             c.setZoom(15);
             c.setCenter(new GeoPoint(35455281,139629711));
    
             ZoomControls zc = (ZoomControls) m.getZoomControls();
             zc.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));
             zc.setGravity(Gravity.BOTTOM + Gravity.CENTER_HORIZONTAL);
             m.addView(zc);
         }
     
         @Override
         protected boolean isRouteDisplayed() {
             return false;
         }
     }
  • 実行すると、以下の画面が表示されます。
    map.003.MapActivity.png

ワーキンググループ/勉強会?