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を使います。

layout.xml

<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キーの設定、ライブラリの設定など色々追加します。(一部抜粋)

AndroidManifest.xml

 <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	真北を０とした方角を指定

とりあえず、位置情報は固定して表示してみます。

MinActivity.java

    @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);//カメラをその位置へ移動
}

横浜ランドマークタワーが見えるはずです。