- 追加された行はこの色です。
- 削除された行はこの色です。
*Titanium以外の地図リンク
-[[Geocoding.jp>http://www.geocoding.jp]] ... Titaniumではありませんが、緯度経度の値を調べたい時に利用できます。
*Titaniumでの地図表示方法
Titaniumで地図を表示する方法は色々有りますが、３通りご紹介します。
*Titanium地図リンク
|地図組み込み方法|メリット|デメリット|h
|~Ti.Mapモジュール|・Titanium標準の地図機能でサンプルが多いです。&br;・iOSとAndroidでほぼ同じプログラムとなります。&br;・[[ピン(Annotation)>https://docs.appcelerator.com/platform/latest/#!/api/Modules.Map.Annotation]]周りの操作が豊富（ピン画像を変えたり、ピンをタッチしたときに説明のテキストや画像やを含んだビューを開くなど）&br;・ソースがシンプルでコーディングしやすいです。また、Alloyでピンを書くことも可能。&br;・もしApple Maps利用が必須のときは唯一の選択肢&br;・Ti 4.1.0からマップ上にライン・ポリゴン・サークルを描画できるようになりました。|・iOSでは貧弱なApple Mapsとなってしまいます。&br;・地図をクリックした地点の緯度・軽度が取得できません。|
|~TiGMapモジュール(iOS専用)|・iOSでGoogle Mapsを使用できます。&br;・タッチや長押しした位置の緯度・経度が取得できます。&br;・使用経験が無いためその他詳細は不明|・iOSのみ対応ですので、AndroidではTi.Mapを使ってプログラムを分ける必要があります。&br;・使用経験が無いためその他詳細は不明|
|~WebViewにGoogle Mapsを組み込む|・同じプログラムでiOS、Android共にGoogle Mapsを使用できます。&br;・Google Maps APIを操作して色々な機能を使用できます（例えばタッチした地点の緯度・経度を取得したり、地図にポリゴン描画したり、２地点の経路を表示したり）。&br;・WebアプリでGoogle Maps APIを使用している開発者にとって使いやすいです。&br;・同じ画面に地図を２つ配置できます。&br;・同様の方法でYahoo地図 APIも利用できます。|・WebViewに組み込むので、プログラム本体との連携が複雑となります。|
**(1) Ti.Mapモジュールを用いた地図表示
Titaniumで標準的な地図表示方法です。iOSではApple Maps、AndroidではGoogle Mapsで表示されます。以前はデフォルトで使用出来ましたが、2014-02-20時点ではモジュール追加画面から「ti.map [android, ios] - Global {API Ver. 2}」を追加して使用します。
また、Alloyの場合はalloy.jsに次の行を追加します。
Alloy.Globals.Map = require('ti.map');
-[[Appcelerator Titanium Alloy Map Integration with ListView Mobile App | YouTube>https://www.youtube.com/watch?v=eJpSP5tGMZY&list=PLQp13IgKjVBd0L7uZyS5_Fg_nG1SRtw2k&index=10]]
***使用上のご注意
現時点(2014-02-20)ではTitaniumデフォルトのAndroid用Google Mapsのバージョンは１で、これを２に対応させるためにモジュールで組み込むように変わったそうです。最近の多くのサンプルではAndroidだけこのモジュールを組み込み、iOSはデフォルトのTi.Mapのままと分けているようです。しかし、両者共通でこのモジュールを使用するソースで書けます。
***リンク
-[[Modules.Map | Appcelerator Titanium Documentation>https://docs.appcelerator.com/platform/latest/#!/api/Modules.Map]]
-[[TitaniumでAndroid向けのMapModule動作させるのにとても苦労したのでその振り返り | TitaniumMobile勉強記>http://h5y1m141.hatenablog.com/entry/2013/10/30/073351]]
-[[Google Maps API v2用Androidモジュールを設定 | SE奮闘記>http://se-suganuma.blogspot.jp/2013/09/titanium-google-maps-api-v2android.html]]
-[[Titanium Advent Calendar 2013 7日目 regionChangedの抑制 | もぎゃろぐ>http://blog.mogya.com/2013/12/titanium-regionchanged.html]] ... 『GoogleMapsSDKのバージョンが上がった関係で、現在Androidでは標準のMapViewではなくてModules.Mapを使うように言われていて...』
-[[Android版のGoogleMapsアプリのようなUIをTitaniumで実現する方法 | TitaniumMobile勉強記>http://h5y1m141.hatenablog.com/entry/2014/03/15/081121]]
-[[Geolocation.addEventListenerでアプリが重くなる | Titaniumユーザー会サポートBBS>http://support.titanium-mobile.jp/questions/558]] ... AndroidのMapViewでLocationイベントが頻発して重くなる時の回避方法
-[[Android で mapを表示させようとすると落ちる | Don't Fall - Titanium Mobileユーザー会サポートBBS>http://support.titanium-mobile.jp/questions/3622?dummytime=5c9c74f52ae30a3cdb0904ec7071467d70bbc1c699c951851a844824d95876ea]]
-[[Modules.Map.View でタップした位置の緯度経度を取得したいがclickイベントが発火しない | Don't Fall - Titanium Mobileユーザー会サポートBBS>http://support.titanium-mobile.jp/questions/3677?dummytime=883f88eebfc0276e5c5e1a1d39401f70cee0dcd073cc9774c01981d143a16c5e]] ... 緯度経度を工夫して取得する方法
-[[Translating NSLocationAlwaysUsageDescription | TiDev>http://www.tidev.io/2014/09/29/translating-nslocationalwaysusagedescription/]] ... iOS8から必要になった設定の記述方法(ローカライズ対応版)
-[[Titanium3.4でiOS8の位置情報をとる際の設定 | Qiita>http://qiita.com/ganezasan/items/434799aa27a41b9eaf0c]] ... iOS8から必要になった設定の記述方法
-[[titanium_mobile / iphone / Classes / GeolocationModule.m>https://github.com/appcelerator/titanium_mobile/blob/master/iphone/Classes/GeolocationModule.m]] ... iOS Map部分のTitanium内部ソース
-[[k0sukey/ti.map at MKDirections>https://github.com/k0sukey/ti.map/tree/MKDirections]] ... iOSの機能を利用して経路探索したルートを表示するマップ(iOS専用)
-[[m1ga/titanium-libraries>https://github.com/m1ga/titanium-libraries]] ... 移動毎に処理できるiOS/Android共通のJavaScriptモジュール
-[[Titanium - ti.map をちょっとだけ便利にしちゃう改造 | Qiita>http://qiita.com/k0sukey/items/6aaf48dd95d59e207b6f]]
-[[Appcelerator Titanium 4.1.0 Sample App>https://github.com/appcelerator-developer-relations/appc-sample-ti410]] ... Ti 4.1.0からはマップ上にラインや円を描画できます。
-[[Ti.MarkerManager>https://github.com/AppWerft/Ti.MarkerManager]] ... Ti.MarkerManager is a library for Appcelerator Titanium for realizing to display a lot of annotations on map.
**(2) TiGMapモジュールを用いた地図表示(iOS専用)
Objective-CでGoogle Mapsを利用する場合は、Google提供の「[[Google Maps SDK for iOS>https://developers.google.com/maps/documentation/ios/?hl=ja]]」を使用します。TiGMapはこのSDKを取り込んだiOS専用Titanium用モジュールです。
~[[Google Maps API よくある質問 使用制限の影響を受ける Maps API サービスを教えてください。>https://developers.google.com/maps/faq?hl=ja#usage_apis]]で『Google Earth API、および Android や iOS などのモバイル プラットフォーム用 Maps API は対象外です。Google マップの埋め込み機能や、地図を含む埋め込み機能を提供するその他の Google サービスのご利用は、これらの使用制限の対象とはなりません。』と有るので、利用回数の制限は無いようです。
***使用上のご注意
そのままではビルドできません。module.xcconfigのパス書き換えが要ります。
***モジュール
-[[daisaru11/TiGMap | GitHub>https://github.com/daisaru11/TiGMap]] ... TiGMapのオリジナルだそうです。更新は止まっているようです。コード記述方法は[[こちらのReadme>https://github.com/daisaru11/TiGMap/blob/master/Readme.md]]が詳しいようです。
-[[alperdincer/TiGMap | GitHub>https://github.com/alperdincer/TiGMap]] ... ☆TiGMapをforkして作られた最新版です。こちらを用いるのが最新でいいようです(by 八木氏)。
-[[Google Maps for iOS | Appcelerator Marketplace>https://marketplace.appcelerator.com/apps/5076#!overview]] ... $30でほぼ同じ仕様のものが販売されているようです。他との違いは不明です。
-[[Ti.GoogleMaps>https://github.com/hansemannn/ti.googlemaps]] ... 多機能のiOS専用地図モジュールだそうです。Appcelerator社員のようで、これが一番いいかも？
***リンク
-[[Google Maps SDK for iOS を Titanium Mobile の Alloy で使う>http://qiita.com/sngmr/items/6a885bca6f38c16818c1]]
-[[Titanium - GoogleMap for iOSモジュール利用時のTiShadow利用方法 | Qiita>http://qiita.com/sngmr/items/3e3d4eac1bca0b72aed7]]
-[[Titanium AlloyからGoogle Maps SDK for iOSを利用する。 « 大阪のアンドロイド/iOS･ Webアプリ開発会社 ノーティス>http://www.notice.co.jp/archives/3328]]
**(3) WebViewにGoogle Mapsを組み込んだ地図表示
詳しくは[[app_8.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_8.js]], [[map.html>https://github.com/yagitoshiro/study3/blob/master/Resources/map.html]]を参照してください。
~[[Google Maps JavaScript API v3 使用制限と購入>https://developers.google.com/maps/documentation/javascript/usage?hl=ja]]によると、90日間連続で1日あたり最大25,000回を超えると有料となるようです。
*[[マップサンプルソース by 八木氏>https://github.com/yagitoshiro/study3/tree/master/Resources]]
map_8だけWebViewにGoogle Mapsを組み込んだ地図表示です。それ以外はTi.Mapモジュールを用いた地図表示です。（厳密に言うとmap_8も一部Ti.Mapモジュールを用いています）
:[[app_1.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_1.js]]|緯度経度固定位置のマップを表示
:[[app_2.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_2.js]]|現在位置のマップを表示
:[[app_3_1.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_3_1.js]]|現在位置にピンを打ったマップを表示
:[[app_3_2.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_3_2.js]]|現在位置にピンを打ったマップを表示し、10秒毎に現在位置のピンを追加 ... 実際にはTi.Geolocation.getCurrentPositionはキャッシュされるので、使えないそうです。
:[[app_4_1.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_4_1.js]]|現在位置の住所を表示。''緯度経度→住所テキストの変換(reverse geocoding)''にGoogle Maps APIを利用。Ti.Geolocation.reverseGeocoderは返却されるテキスト内容が良くないので、その代替です。~
~
例えば東京駅の緯度：35.681382、経度：139.766084を変換した場合は次のようになります。
::Ti.Geolocation.reverseGeocoderは次を返します。|407, 神田駿河台三丁目, 千代田区 (Chiyoda), 北葛飾郡, 100-0005, 日本
::Google Maps APIは次を返します。|日本, 東京都千代田区丸の内１丁目９−１
:[[app_5_1.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_5_1.js]]|入力した地名の地図を表示。''住所テキスト→緯度経度の変換(forward geocoding)''にGoogle Maps APIを利用。Ti.Geolocation.forwardGeocoderは良くないので、その代替です。以降のサンプルで言語は日本語、中国語、台湾語に対応
:[[app_7.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_7.js]]|現在位置のマップを表示（Google Maps APIでの住所テキスト取得付き）、入力した地名地点にピンを配置し、現在位置からの''直線を表示''。
:[[app_7_1.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_7_1.js]]|app_7.jsの機能に加え、道順ボタンを押すとGoogle Maps APIでそこまでの道順座標配列を取得し、''ルートを表示''。&br;注意事項：map_8の場合と比べて[[途中を端折ったり目的地まで到達していなかったり、かなりいい加減なデータが返ることがあるそうです。>http://support.titanium-mobile.jp/questions/3476]]
:[[app_8.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_8.js]], [[map.html>https://github.com/yagitoshiro/study3/blob/master/Resources/map.html]]|app_7_1.jsの機能に加え、道順ボタンを押すとルートをWebViewに入れた''Google Mapsで表示''
:[[app_9.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_9.js]]|ピンをクリックするとチェックイン画面を表示
:[[app_10.js>https://github.com/yagitoshiro/study3/blob/master/Resources/app_10.js]], [[arrow.gif>https://github.com/yagitoshiro/study3/blob/master/Resources/arrow.gif]]|矢印画像でコンパスを表示
~
注意：Ti.Mapはモジュールとして組み込むように変わったので、tiapp.xmlにti.mapモジュールを組み込み、app.jsの先頭に次の行を追加してください。
Ti.Map = require('ti.map');
~
注意：API仕様が変わったため、app_7.js, app_8.jsで「map.addRoute({...});」の行は次のように書き換える必要が有ります。
#pre{{
var route = Ti.Map.createRoute({
color: 'red',
points: [{latitude:geo.lat, longitude:geo.lng}, {latitude:current_position.latitude,longitude:current_position.longitude}],
width: 4,
});
map.addRoute(route);
}}
~
注意：API仕様が変わったため、app_7_1.jsで次のように書き換える必要が有ります。~
１つ目「map.addRoute({name:'道順', points:points, color:'Red'});」
#pre{{
var route = Ti.Map.createRoute({
color: 'red',
points: points,
width: 4,
});
map.addRoute(route);
}}
~
２つ目「map.addRoute({...});」
#pre{{
var route = Ti.Map.createRoute({
color: 'blue',
points: [{latitude:geo.lat, longitude:geo.lng}, {latitude:current_position.latitude,longitude:current_position.longitude}],
width: 4,
});
map.addRoute(route);
}}
*リンク
-SIZE(30){[[Geocoding.jp>http://www.geocoding.jp]]} ... ☆Titaniumではありませんが、緯度経度の値を調べたい時に利用できます。
-[[Titanium MobileのGeocodingで日本語を扱う | Selfkleptomaniac>http://selfkleptomaniac.org/archives/2094]] ... 住所番地と緯度経度の双方向変換など
-[[iOSとAndroidで地図アプリ（Google Maps）を起動 | SE奮闘記>http://se-suganuma.blogspot.jp/2013/09/titanium-iosandroidgoogle-maps.html]]
-[[Google Maps API v2用Androidモジュールを設定 | SE奮闘記>http://se-suganuma.blogspot.jp/2013/09/titanium-google-maps-api-v2android.html]]
-[[Titanium Advent Calendar 2013 7日目 regionChangedの抑制 | もぎゃろぐ>http://blog.mogya.com/2013/12/titanium-regionchanged.html]] ... 『GoogleMapsSDKのバージョンが上がった関係で、現在Androidでは標準のMapViewではなくてModules.Mapを使うように言われていて...』
-[[TitaniumでAndroid向けのMapModule動作させるのにとても苦労したのでその振り返り | TitaniumMobile勉強記>http://h5y1m141.hatenablog.com/entry/2013/10/30/073351]]
-[[どっちのOSでも位置情報を連続取得！ | ビスタのTitanium奮闘記>http://vistitanium.blogspot.jp/2012/11/titanium2os-titaniumjp.html]] ... Androidでも連続して位置情報を取得する方法
-[[緯度・経度から二点間の距離と方向を計算する | それはBooks>http://hamasyou.com/blog/2010/09/07/post-2/]]
-[[benbahrenburg/Ti.Geocoder | GitHub>https://github.com/benbahrenburg/Ti.Geocoder]]
-[[富豪実装なJavaScriptジオコーダーを作ってみた | Qiita>http://qiita.com/cognitom/items/695843cea316fa6784eb]]
-[[Titanium module: TiGeocoder • gitTio>http://gitt.io/component/ti.geocoder]]
-[[Titanium module: TiGeoVisits • gitTio>http://gitt.io/component/ti.geovisits]] ... iPhone 6以降で使用できるCLVisitsのモジュールです。どのくらいの時間滞在したかが取得できます。
-[[Titanium module: Ti.GeoTools • gitTio>http://gitt.io/component/de.appwerft.geotools]] ... Ti.Mapを拡張したり、便利なWeb APIが利用できるモジュールです。緯度経度から高さも取れるようです。
-[[Titanium module: Ti.LatLon • gitTio>http://gitt.io/component/de.appwerft.latlon]] ... 2地点間の距離取得といった地図関連の計算モジュール
