Android StreetViewを表示する
Google Map API V2でStreetViewを表示する方法を紹介します。基本的にはGoogleMapを表示する方法とそんなに変わりません
手順としては以下
- フィンガープリントの取得
- Googleアカウントを取得してAPIキーを取得
- StreetViewを表示するアプリの作成
環境は、次の通りとして説明します。
- Mac OS
- Eclipse ADT
フィンガープリントの取得
まずは、APIキー取得に必要となるフィンガープリントを取得します。
ターミナルを立ち上げます。
ホームディレクトリに、.androidというディレクトリがあるはずなのでそのディレクトリへ移動します。
そこで以下のコマンドを実行します。
keytool -list -keystore debug.keystore
パスワードの入力を求められますが、無視してエンターを押します。
そうすると証明用のフィンガープリント(SHA1)が表示されます。この値をコピーしておきます。
APIキーの取得
Googleアカウントが必要になりますので、Googleアカウントがない方は先にGooleアカウントを取得します。
Google API Consoleのサイトを開きます。 https://code.google.com/apis/console
メニューから「認証情報」を選択して「新しいキー」作成ボタンを押します。
以下のような画面が表示されるので、テキストエリアにコピーしたフィンガープリント;作成するアプリのパッケージ名
を入力して作成ボタンを押します
そうするとAPIキーが作成されますので、作成されたAPIキーをコピーしておきます。
そのあとAPIメニューを選択して、「Goole Maps Android API V2」を選択してステータスを有効にします。
Goole Play Services ライブラリプロジェクトのインポート
GoogleMapを利用するアプリを作成するためには、「Google Play service」が必要になりますので、SDKマネージャーを立ち上げで
インストールを行います。次にGoogle Play Servicesライブラリをアプリのプロジェクトから参照しますので、ライブラリプロジェクト
としてインポートする必要があります。
メニューからFile -> Import で 「Exisiting Android Code Into Workspace」を選択します。
インポートするプロジェクトを「SDKインストールディレクトリ/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>
次にJavaの実装です。
StreetViewPanoramaFragmentよりStreetViewPanoramaのオブジェクトを取得します。
次にStreetViewPanoramaCameraオブジェクトをnewします。設定する項目はzoom, tilt, bareingを設定します。
このクラスに表示する視点を設定します。
|
bearing
|
真北を0としてカメラの方向を指定します。 |
| tilt | カメラの水平角度を指定します |
| zoom | ズーム倍率 |
animateToメソッドでカメラの視点を設定すれば表示することができます。
@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);
}
最後にマニフェストファイルです。
パーミッション、 uses-feature, metaデータ、use-librayを追加します。
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android
以上で、完成です。
横浜ランドマークタワーが見えたでしょうか？