大阪のAndroid/iOS･Webアプリ開発会社

参考記事

1. Google Maps SDK for iOS を Titanium Mobile の Alloy で使う
2. Titanium Mobile/地図

環境

• Titanium SDK 3.3.0.GA
• Titanium Alloy 1.4.1
• Google Maps SDK for iOS 1.8.1
• alperdincer/TiGMap – GitHub

alperdincer/TiGMapをリビルド

githubからcloneし、以下のGoogleMaps関連のファイルを最新SDKのものに置き換えます。bundleはビルドには関連ないのかもしれませんが、とりあえず最新に置き換えています。

• GoogleMaps.bundle/
• GoogleMaps.framework/

次に、titanium.xcconfigに記述されているTitanium SDKのバージョンを書き換えます。

TITANIUM_SDK_VERSION = 3.3.0.GA

最後に、module.xcconfigのOTHER_LDFLAGS変数のGoogle Maps SDKへのパスを書き換えます。

OTHER_LDFLAGS=$(inherited) -F"/Users/hoge/develop/GoogleMaps-iOS-1.8.1/"...

オリジナルではEXT_MODS_BASEDIR変数が定義されていますが、特に必要ないと思います。私は削除してあります。またオリジナルでは、GoogleMaps.frameworkとなっていますが、SDKのルートディレクトリで大丈夫です。

後は、build.pyを実行すれば、com.mekansal.gmapios-iphone-1.0.zipが生成されるはずです。このzipファイルをalloyで作成したサンプルアプリケーションディレクトリのルート下(tiapp.xmlがあるディレクトリ）へ複写しておきます。

Alloyからモジュールを利用する

まず、tiapp.xmlにモジュール定義を追加します。

<modules>
  <module platform="iphone" version="1.0">com.mekasal.gmapios</module>
</modules>

次に、alloy.jsで、このモジュールをロードします。この辺りの記述方法は参考記事(1)の方法を参考にさせていただきました。

Alloy.Globals.GMapView = require('com.mekansal.gmapios');
Alloy.Globals.GMapView.setAPIKey(Alloy.CFG.googlemapapikey);

Alloy.CFG.googlemapapikeyは、Google API ConsoleでAPIキーを取得し、config.jsonに記述しておきます。

{
  "global": {
    "googlemapapikey": "Google API Consoleで取得したAPIキー"
  }
}

GoogleMaps.bundleをassetsへ

Google Maps SDKのGoogleMaps.bundleディレクトリをapp/assets下へ複写しておきます。このbundleはビルド時、Resourcesへ自動的に複写されます。

views/index.xmlでGMapViewを定義

せっかく、alloyを使うなら、index.xmlにviewを記述したいですね。もちろん、コントローラーで生成しても問題ありません。

<Alloy>
  <Window>
    <View ns="Alloy.Globals.GMapView" id="map" />
  </Window>
</Alloy>

ネームスペースを使ってモジュールとViewタグをバインドします。このViewが生成されるとき、Alloy.Globals.GMapView.createViewが呼出されます。参考記事(1)のように、タグ名をGoogleMapにすると、Alloy.Globals.GMapView.createGoogleMapメソッドがバインドされます。ネームスペースとタグ名からメソッド名がCoCでバインドされているようで、モジュールのソースコードを修正して、メソッド名を変えれば、タグ名も変更できそうです。

controllers/index.jsでマップ属性を設定

最後に、コントローラー（controllers/index.js）でマップの属性を設定して、表示します。

$.map.setLocation({
  latitude: 34.689197,
  longitude: 135.502321
});

$.map.setZoom(12);
$.map.setBearing(180);
$.map.setViewingAngle(45);

$.index.open();

サンプルアプリをビルド

後は、ビルドして、実行するだけです。以下のCLIコマンドは、ビルドしたアプリを実機へ転送するコマンドです。

$ titanium build -T device --platform iphone

起動後の画面は以下のようになります。setBearing(180)しているので、ちょっと変な感じがしますね。

ビルド時、モジュールのzipファイルは展開されて、zipファイルは削除されます。展開後は自動的に以下のようなディレクトリへ移動します。

modules/
  iphone/
    com.mekansal.gmapios/
      1.0/
        module.xcconfig
        ...

この階層を見ると、tiapp.xmlのモジュール定義の意味がよくわかると思います。

daisaru11/TiGMapとalperdincer/TiGMapとの違いは、後者ではAPIの実装が追加されているようです。どちらを利用してもよいと思いますが、後者のものが若干新しいので、手を加えるなら、こちらがよいかもしれません。どちらもTitaniumモジュール作成の参考になると思います。

最後に、daisaru11/TiGMapとalperdincer/TiGMapの作者の方、参考にさせていただきました記事の著者に謝意を表します。