Android Tips #26 Google Maps Android API v2 のマーカーをカスタマイズする

はじめに

前回の記事でご紹介したマーカーのカスタマイズ方法について、もう少し詳細に解説してみたいと思います。以下のようなマーカーを作ることができます！

マーカーを追加するには

マップ上にマーカーを追加するには GoogleMap#addMarker() メソッドを使います。引数には MarkerOption クラスのインスタンスを渡し、 MarkerOption でマーカーのタイトルやスニペットなどを設定します。

// マーカーを貼る緯度・経度
LatLng location = new LatLng(35.697261, 139.774728);

// マーカーの設定
MarkerOptions options = new MarkerOptions();
options.position(location);
options.title("クラスメソッド株式会社");
options.snippet(location.toString());

// マップにマーカーを追加
mMarker = mMap.addMarker(options);

アイコンをカスタマイズする

マップ上に表示されるアイコンをカスタマイズしてみます。アイコンを変更するには MarkerOption#icon() メソッドを使います。引数には BitmapDescriptor という GoogleMap ライブラリ独自の Bitmap クラスを使います。BitmapDescriptorFactory クラスを使って BitmapDescriptor を生成することができ、 マーカー用のアイコンを作る defaultMarker() メソッドを使うと色違いのデフォルトアイコンを作れたりします。以下では BitmapDescriptorFactory#defaultMarker() を使い、青色のデフォルトアイコンを設定してみました。

// 紫色のアイコン
BitmapDescriptor icon = BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE);
options.icon(icon);

defaultMarker() で作成できるデフォルトアイコンのカラーバリエーションは下図の通りです。

ちなみに defaultMarker() で渡す引数は float 型で Hue (色相) を直接指定することもできました。RED の 0f から始まり 360f まで自由に指定できます。 180f は RED の補色である CYAN になります。
また BitmapDescriptor#fromResource() を使うとリソース内の Drawable をアイコンに指定できます。

BitmapDescriptor icon = BitmapDescriptorFactory.fromResource(R.drawable.ic_logo);
options.icon(icon);

InfoWindow をカスタマイズする

次に InfoWindow (マーカーをタップしたときに表示されるウインドウ) をカスタマイズしてみます。InfoWindow の表示を制御するには、まず InfoWindowAdapter インターフェースを実装したカスタムアダプタークラスを作ります。InfoWindowAdapter を実装すると以下のようになるはずです。

private class CustomInfoAdapter implements InfoWindowAdapter {

    public CustomInfoAdapter() {
    }

    @Override
    public View getInfoWindow(Marker marker) {
        return null;
    }

    @Override
    public View getInfoContents(Marker marker) {
        return null;
    }

}

実装メソッド getInfoWindow() と getContents() の中でカスタムViewの生成を行います。つまり View であれば何でも良い！ということになります。自由にカスタマイズできますね。getInfoWindow() と getContents() メソッドでは Marker インスタンスが渡されるので、そこでどの Marker がタップされたか判別し、プロパティの情報を View に反映します (今回は getInfoWindow() のときのみで実装しました)。

/**
 * InfoAdapter のカスタムクラス.
 */
private class CustomInfoAdapter implements InfoWindowAdapter {

    /** Window の View. */
    private final View mWindow;

    /**
     * コンストラクタ.
     */
    public CustomInfoAdapter() {
        mWindow = getLayoutInflater().inflate(R.layout.custom_info_window, null);
    }

    @Override
    public View getInfoWindow(Marker marker) {
        render(marker, mWindow);
        return mWindow;
    }

    @Override
    public View getInfoContents(Marker marker) {
        return null;
    }

    /**
     * InfoWindow を表示する.
     * @param marker {@link Marker}
     * @param view {@link View}
     */
    private void render(Marker marker, View view) {
        // ここでどの Marker がタップされたか判別する
        if (marker.equals(mMarker)) {
            // 画像
            ImageView badge = (ImageView) view.findViewById(R.id.badge);
            badge.setImageResource(R.drawable.ic_logo);
        }
        TextView title = (TextView) view.findViewById(R.id.title);
        TextView snippet = (TextView) view.findViewById(R.id.snippet);
        title.setText(marker.getTitle());
        snippet.setText(marker.getSnippet());
    }

}

あとはこのカスタムアダプターをインスタンス化し、 GoogleMap#setInfoWindowAdapter() でセットして完成です！

mMap.setInfoWindowAdapter(new CustomInfoAdapter());

ソースコード

今回のサンプルプロジェクトを github に公開しました！ぜひ Pull してみてください。AndroidManifest.xml の application タグ内の meta-data の value を自身の Google API Key に変更しないと動かないのでご了承ください。詳しくはこちらに載っているのでご参照ください！

suwa-yuki/GoogleMapMarkerSample

まとめ

InfoWindow は View であれば何でも良い、というところが自由度高くて良い感じですね。微妙なところは Adapter の Marker の判別処理ですね。 Marker に Id などセットできれば解消できそうなんですが…。現状は ArrayList など使って自分で作っていくしかなさそうです。