Hello, Views (Google Map View編)

Google Map View | Android Developers

http://developer.android.com/intl/ja/resources/tutorials/views/hello-mapview.html 事前に Android SDK マネージャーでGoogle APIsをインストールしておきましょう。
また、Google Maps APIのAPI Keyが必要になります。取得していない場合は以下を参照し、取得しておきましょう。
Android Maps API Key 取得方法 - ログろいど
Google APIsをターゲットとした仮想デバイスが作られていない場合は、AVDで作成しておきます。

Part 1: Map Activityの作成

ビルドターゲットを、Google APIs、プラットフォームを2.3.3でHelloGoogleMapsというプロジェクトを作成します。
AndroidManifest.xmlを開き、以下のように変更します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.blogspot.logroid.helloGoogleMaps"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="10" />
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".HelloGoogleMapsActivity"
            android:label="@string/app_name"
            android:theme="@android:style/Theme.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <uses-library android:name="com.google.android.maps" />
    </application>
</manifest>

res/layout/main.xmlを開き、以下のように変更します。

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mapview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:apiKey="Google MapsのAPIキーを入力"
/>

HelloGoogleMapsActivity.javaを開き、以下のように変更します。

package jp.blogspot.logroid.helloGoogleMaps;

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

import android.os.Bundle;

public class HelloGoogleMapsActivity extends MapActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        MapView mapView = (MapView) findViewById(R.id.mapview);
        mapView.setBuiltInZoomControls(true);
    }

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

Google APIsをターゲットとした仮想デバイスで実行します。

Part 2: オーバーレイアイテムの追加

src/パッケージ名で右クリックをして、新規->クラスをクリックします。
名前に、HelloItemizedOverlayを入力し、スーパークラスにcom.google.android.maps.ItemizedOverlayを入力します。
スーパークラスからのコンストラクターにチェックを入れ、完了をクリックします。
HelloItemizedOverlay.javaを開き、以下のように変更します。

package jp.blogspot.logroid.helloGoogleMaps;

import java.util.ArrayList;

import android.app.AlertDialog;
import android.content.Context;
import android.graphics.drawable.Drawable;

import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.OverlayItem;

public class HelloItemizedOverlay extends ItemizedOverlay<OverlayItem> {
    private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
    private Context mContext;

    public HelloItemizedOverlay(Drawable defaultMarker, Context context) {
     super(boundCenterBottom(defaultMarker));
        mContext = context;
    }

    public void addOverlay(OverlayItem overlay) {
        mOverlays.add(overlay);
        populate();
    }

    @Override
    protected OverlayItem createItem(int i) {
        return mOverlays.get(i);
    }

    @Override
    public int size() {
        return mOverlays.size();
    }

    @Override
    protected boolean onTap(int index) {
        OverlayItem item = mOverlays.get(index);
        AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);
        dialog.setTitle(item.getTitle());
        dialog.setMessage(item.getSnippet());
        dialog.show();
        return true;
    }
}

HelloGoogleMapsActivity.javaを開き、以下のように変更します。

package jp.blogspot.logroid.helloGoogleMaps;

import java.util.List;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

import android.graphics.drawable.Drawable;
import android.os.Bundle;

public class HelloGoogleMapsActivity extends MapActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        MapView mapView = (MapView) findViewById(R.id.mapview);
        mapView.setBuiltInZoomControls(true);

        List<Overlay> mapOverlays = mapView.getOverlays();
        Drawable drawable = this.getResources().getDrawable(R.drawable.androidmarker);
        HelloItemizedOverlay itemizedoverlay = new HelloItemizedOverlay(drawable, this);

        GeoPoint point = new GeoPoint(19240000,-99120000);
        OverlayItem overlayitem = new OverlayItem(point, "Hola, Mundo!", "I'm in Mexico City!");

        itemizedoverlay.addOverlay(overlayitem);
        mapOverlays.add(itemizedoverlay);
    }

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

Google APIsをターゲットとした仮想デバイスで実行します。

HelloGoogleMapsActivity.javaを開き、以下のように変更します。

package jp.blogspot.logroid.helloGoogleMaps;

import java.util.List;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

import android.graphics.drawable.Drawable;
import android.os.Bundle;

public class HelloGoogleMapsActivity extends MapActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        MapView mapView = (MapView) findViewById(R.id.mapview);
        mapView.setBuiltInZoomControls(true);

        List<Overlay> mapOverlays = mapView.getOverlays();
        Drawable drawable = this.getResources().getDrawable(R.drawable.androidmarker);
        HelloItemizedOverlay itemizedoverlay = new HelloItemizedOverlay(drawable, this);

        GeoPoint point = new GeoPoint(19240000,-99120000);
        OverlayItem overlayitem = new OverlayItem(point, "Hola, Mundo!", "I'm in Mexico City!");

        GeoPoint point2 = new GeoPoint(35410000, 139460000);
        OverlayItem overlayitem2 = new OverlayItem(point2, "Sekai, konichiwa!", "I'm in Japan!");

        itemizedoverlay.addOverlay(overlayitem);
        itemizedoverlay.addOverlay(overlayitem2);
        mapOverlays.add(itemizedoverlay);
    }

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

Google APIsをターゲットとした仮想デバイスで実行します。

今回出てきたキーワードについて解説。

MapView

マップを表示するビュー

setBuiltInZoomControls

ズームの許可

GeoPoint

経度、緯度のクラス

OverlayItem

地図上にアイテムを表示する
引数として、アイテムがタップされた際のバルーンに表示するタイトル、メッセージを受ける

isRouteDisplayed

MapActivityを継承した場合必須となるメソッド
ルート表示を行うかというフラグを返すために実装する

ログろいど

2012年4月24日火曜日