Google Maps SDK for iOS を Titanium Mobile の Alloy で使う

More than 5 years have passed since last update.


僕は Google Maps が使いたい。iOSで。Titaniumで。Alloyで。

突然ですが僕は地図が大好きです。ヒマがあれば Google Maps を眺めて色々妄想しております。最近 Google Maps アプリが iPad にも対応したので、トイレ地図がとても捗り重宝しております。

それに引き換え、「パチンコガンダム駅」などで話題になった iOS 6 以降の Apple Maps。最近かなり改善されているとは思うのですが、Google Maps に比べると、まだまだ劣っていると言わざるをえません。

Titanium Mobile で iOSアプリを開発し、そこに地図を載せたいと思った場合、普通にやってしまうと Apple Maps を利用することになってしまいます。地図スキーな僕として、常々これは何とかしたいと思っておりました。iOSアプリ でも Google Maps が使いたい。使いたいんだ!

幸い Google 様から、iOS用の Google Maps SDK が公開されております。それを Titanium Mobile に組み込み、Alloy から使ってしまおう!というのが、この記事の趣旨になります。


モジュールを調達する

Titanium Mobile から iOS用の Google Maps SDK を利用する場合、Titanium のお作法に則って モジュール化 することが必要になります。

さてそのモジュールですが、以下の方法で入手できます。

わたくし@sngmrこと森 真吾は、面倒くさいことが大キライです。すぐに Google Maps を Titanium Mobile から使いたいんです。というわけで、Appcelerator Marketplace から購入することにしました。そのものズバリなモジュールが売っていたので。開発者あたり$30です。


Google Maps for iOS:

https://marketplace.appcelerator.com/apps/5076?1735372176


オープンソースのプロジェクトもgithubにありましたよ。

こちらは試していないのですが、手順がほぼ同じような感じだったので、もしかしたらこちらが本家かもしれませんね。


TiGMap:

https://github.com/daisaru11/TiGMap



組み込み手順

手順は Google Maps for iOS のドキュメント 、または TiGMap の README に詳しく書いてあります。

簡単に流れを説明すると・・・


  1. Google Maps SDK for iOS をダウンロード

  2. Google APIs Console で Google Maps SDK for iOS を有効にし API Access キーを取得する

  3. (Marketplace で購入した) モジュールを配置

  4. モジュール内の module.xcconfig に ダウンロードした Google Maps SDK for iOS へのパスを記述

  5. Titanium Mobile のプロジェクトを作る(非Alloy)

  6. Resources フォルダに GoogleMaps.bundle をコピーする

  7. モジュールを使ってコードを書く

こんな感じでした。

各ドキュメントに詳しく書いてあるので、そちらを参照してください。


Alloyから使う

Alloy ではない Titanium Mobile プロジェクトでは、上記手順によりiOS上で Google Maps を動かすことができました。ただ Alloy で動かそうとすると、以下の点が問題になってきます。



  • Resources フォルダに GoogleMaps.bundle をコピー


    • Alloy では Resources フォルダは自動生成なので、事前にコピーすることができない(消される可能性がある)




  • View の XML ファイルに記述できない


    • Controller に書かざるをえない



その辺りをなんとかしていきましょう


GoogleMaps.bundleのコピー

app/assets ディレクトリGoogleMaps.bundle をコピー することで解決できます。

app/assetsディレクトリにあるファイルやフォルダは、実行時にResourcesフォルダへコピーされます。あらためて言うまでもないかもしれませんね。


View の XML を使う・・・というより Alloy に最適化する

僕はこんな感じにしてみました。プロジェクト内を色々と触るので、サンプルコードとして解説してみます。


APIキーをconfig.jsonで定義

Google APIs Console で取得した APIキー を定義する必要がありますが、せっかくなのでconfig.jsonに書いてしまいましょう。

例ではglobalに定義していますが、このモジュールは iOS 専用なので、os:iosに定義しても良いかもしれません。

{

"global": {
"googlemapapikey": "WRITE YOUR API KEY HEAR"
},
"env:development": {},
"env:test": {},
"env:production": {},
"os:ios": {},
"os:android": {},
"dependencies": {}
}


グローバル領域に GoogleMapsモジュールを定義

すべての処理に先立って実行される alloy.js を使って、グローバル領域に GoogleMapsモジュール を登録してしまいます。一緒にライセンスキーも設定してしまいましょう。


alloy.js

Alloy.Globals.GoogleMaps = require('com.moshemarciano.googleMaps');

Alloy.Globals.GoogleMaps.licenseKey(Alloy.CFG.googlemapapikey);


View の定義は Namespace を使う

View の XML はこんな感じに定義します。当然ながら GoogleMapsモジュール をそのまま定義することはできないため、Namespaceを利用します。 alloy.js で GoogleMapsモジュール をグローバル領域に登録したのは、Namespaceで利用するためです。


index.xml

<Alloy>

<Window id="window">
<!-- GoogleMaps -->
<GoogleMap ns="Alloy.Globals.GoogleMaps" id="map" />
</Window>
</Alloy>


Alloy スタイルシート

これは通常と同じです。今回はこのように指定しました。


index.tss

"#map": {

width: Ti.UI.FILL,
height: Ti.UI.FILL,
}


Alloy コントローラ

これも特に難しいところはありません。

せっかくなので、我が地元の名古屋駅を標準で表示するようにしてみました。


index.js

// 名古屋駅へズームイン!

$.map.setCamera({
latitude: 35.171072,
longitude: 136.88158,
zoom: 13
});

$.window.open();



実行

ktkr!!

iOS 上で Google Maps が使えるようになったよ!!Alloyで!!

Screen Shot 2013-07-29 at 12.46.15 copy.jpg