Android StreetView を表示してみる
Google Map API V2でStreetViewを表示する方法を紹介します。基本的にはGoogleMapを表示する方法とそんなに変わりません
手順としては以下
1.フィンガープリントの取得
2.Googleアカウントを取得してAPIキーを取得
3.StreetViewを表示するアプリの作成
##フィンガープリントの取得
まずは、APIキー取得に必要となるフィンガープリントを取得します。
ターミナルを立ち上げます。
ホームディレクトリに、.androidというディレクトリがあるはずなのでそのディレクトリへ移動します。
そこで以下のコマンドを実行します。
keytool -list -keystore debug.keystore
SHA-1のフィンガープリントが表示されのでコピーしておきます
##APIキーの取得
Google API Consoleのサイトを開きます。
https://code.google.com/apis/console
新しいAndroidアプリ用の新しいキーを作成します。
この際に「フィンガープリント；アプリのパッケージ名」の入力を求められます。
先ほどのフィンガープリントとアプリのパッケージ名を決めて入力します。
APIキーが作成されます。
APIステータスの設定で、「Google Maps Android API V2」を有効にします。
##Google Play Services プロジェクトのインポート
GoogleMapを利用するアプリを作成するためには、「Google Play service」が必要になります。SDKマネージャーを立ち上げインストールを行います。
次にGoogle Play Servicesライブラリをアプリのプロジェクトから参照しますので、
ライブラリプロジェクトとしてインポートする必要があります。
メニューからFile -> Import で 「Exisiting Android Code Into Workspace」を選択
インポートするプロジェクトに以下を選択
extras/google/google_play_services/libproject/google-play-services_lib
##Androidプロジェクト作成
新規にAndroidアプリを作成します。 APIレベルは「4.4」としました。
プロジェクトプロバティを開き先ほど追加したgoogle-play-services-libを参照するように参照ライブラリに追加します。
###レイアウト
StreetViewを表示するためには、StreetViewPanoramaFragmentを使います。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.mapsample.MainActivity" >
<fragment
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
class="com.google.android.gms.maps.StreetViewPanoramaFragment"
/>
</RelativeLayout>
###Manifiest
マニフェストファイルには、パーミッション、APIキーの設定、ライブラリの設定など色々追加します。(一部抜粋)
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="com.example.mapsample.permission.MAPS_RECEIVE" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="取得したAPIキー"
/>
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
<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>
###MainActivity
手順は概ね以下の通りです。
ストリートビューの視点を表す、StreetViewPanoramaCameraオブジェクトを生成します。
StreetViewFragmentからStreetViewPanoramaクラスを取得して
StreetViewPanoramaに位置情報と、StreetViewPanoramaCameraを設置すれば
StreetViewが表示されます。
StreetViewPanoramaCameraのコンストラクタにはzoom,tilt,bearingを設定します。
| 項目 | 設定内容 |
|---|---|
| zoom | ズーム倍率 |
| tilt | カメラの水平角度を指定 |
| bearing | 真北を０とした方角を指定 |
とりあえず、位置情報は固定して表示してみます。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
StreetViewPanoramaFragment fm = (StreetViewPanoramaFragment)getFragmentManager().findFragmentById(R.id.map);
StreetViewPanorama map = fm.getStreetViewPanorama();
StreetViewPanoramaCamera c = new StreetViewPanoramaCamera(10.0f, 10.0f, 165.0f);
map.setPosition(new LatLng(35.456337, 139.629803));
map.animateTo(c, 1000);//カメラをその位置へ移動
}
横浜ランドマークタワーが見えるはずです。