[Titanium] Google Maps API v2用Androidモジュールを設定

投稿日：

google-maps-v2_titanium_android-moduleTitanium Mobileで作成したiOSアプリ、Androidアプリ内にGoogle Mapを表示して、店舗情報をプロット表示するために調査したときの覚書。

環境： Titanium SDK 3.1.1.GA

Titanium公式ドキュメントを読む。

iOSでは「Titanium.Map」
Androidでは「Modules.Map」というモジュール
を使うらしい。

iOS用にはKitchenSinkを参考にすれば難しくないと思う。ここからはAndroid用のモジュールを使えるようにするまでの手順。

 

Android用のモジュールに関する公式ドキュメントはこちら。

このモジュールはTitanium 3.1.0以上が必要なので注意。

 

簡単に手順をまとめると。

１．Google Play Services SDKをインストール

Android SDK Managerを起動して「Extras」 → 「Google Play services」をインストールする。

 

 

２．Google APIs Consoleに登録してAPI Keyを取得

Google APIs Consoleにアクセスして「Google Maps Android API v2」をONにする。

Google APIs Consoleの「API Access」 → 「Create new Android Key...」からアプリに埋め込まれているFingerPrintを入力

開発用のFingerPrintは下記コマンドで確認できる（パスワードはなし）。S
$ keytool -list -v -keystore ~/Library/Application\ Support/Titanium/mobilesdk/osx/3.1.1.GA/android/dev_keystore

すでにアプリを公開しているなら、keystoreファイルを作成しているはずなので、同じコマンドで確認できる。
$ keytool -list -v -keystore /path/to/keystore

詳しくは公式ドキュメントで。

複数行登録出来るようなので、開発用も同じAPI Keyにしてみた。FingerPrintとセミコロンのあとに入力するpackage nameはtiapp.xmlの「id」。

 

 

３．tiapp.xmlにAPI Keyとモジュールを設定

公式ドキュメントにあったのをそのまま貼り付け。ただGPS機能は使わないので除外。

<android>
    <manifest>
        <!-- Allows the API to download data from Google Map servers -->
        <uses-permission android:name="android.permission.INTERNET"/>
        <!-- Allows the API to cache data -->
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>  
        <!-- Allows the API to access Google web-based services -->
        <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
        <!-- Specify OpenGL ES 2.0 as a requirement -->
        <uses-feature android:glEsVersion="0x00020000" android:required="true"/>
        <!-- Replace <com.domain.appid> with your application ID -->
        <uses-permission android:name="<com.domain.appid>.permission.MAPS_RECEIVE"/>
        <permission android:name="<com.domain.appid>.permission.MAPS_RECEIVE" android:protectionLevel="signature"/>
        <application>
            <!-- Replace "PASTE YOUR GOOGLE MAPS API KEY HERE" with the Google API key you obtained -->
            <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="PASTE YOUR GOOGLE MAPS API KEY HERE"/>
        </application>
    </manifest>
</android>

読み込むモジュールも記述

<modules>
    <module platform="android">ti.map</module>
</modules>

 

 

４．使ってみる

var MapModule = require('ti.map');

win.add(MapModule.createView({
    mapType: MapModule.NORMAL_TYPE,
    animate: true,
    region: {
        latitude: 35.136942151841716,
        longitude: 136.90021680351,
        latitudeDelta: 0.05,
        longitudeDelta: 0.05
    },
    userLocation: false
}));

 

最後に開発してて気づいたことをいくつか

  • regionに緯度と経度は負の値を設定すると「Invalid Region」と怒られる（iOS）
  • scrollViewの中に入れるとうまく動作しない（Android）

 

 

< Related Posts >