iOS5マップ風ウェブアプリを作ってみました。
http://dl.dropbox.com/u/8719413/y_ichikawa/map/map.html
以下の機能を実装しました。若干機能が欠落しています。
- 地図の表示
- 場所の検索
- 現在地の追尾
- ピンのドロップ
- ピンのそばのストリートビューの表示
- 起動時に前回の場所を表示
- 経路検索 (2012年9月30日追加)
- ナビゲーション機能 (2012年9月30日追加)
- 表示の切り替え(地図、航空写真、地図+写真) (2012年10月1日追加)
- 渋滞状況表示 (2012年10月1日追加)
- ピンの住所表示 (2012年10月1日追加)
- 「ピンを置き換え」 (2012年10月1日追加)
- プリント機能 (2012年10月1日追加)
- ブックマークの一部 (2012年10月2日追加)
現在地のマーカーがパルスします。私にこういうことが無からできるはずもなく、stedmanさんのGeoLocateMeを利用させていただきました。
http://waox.main.jp/news/?p=3722
https://github.com/stedman/GeoLocateMe
iPhone 3GSでホーム画面に登録して触っていたところ、落ちることがありました。3GSのiOS5でウェブアプリはメモリ面でちょっときつそうです。iOS6だといっそうつらくなる?
それから、watchPositionのコールバックをonpagehideでクリアしているのですが、「ホーム画面に追加」して起動すると、アプリ終了時にonpagehideが発生しないことを確認しました。他に代替になりそうなイベントも見つからず、重要な後処理ができていないので、何度か使ううちに不具合が起こる可能性が高いです。その点ご了承ください。
デザイン関連にはTwitter Bootstrapを使用しました。いいですね。Google MapsのInfoWindowと干渉するので、
#map img { max-width: none; }
(#mapはGoogle Mapにするdiv要素)
とすると回避できました。(Stack Overflowより)
IT関連のニュースを見ていると、iOS6の新マップアプリが大変話題になっていますね。GoogleのマップアプリがApp Storeの承認待ち状態という噂が流れて、ユーザーが安心したところに、昨日、Googleのシュミット会長から「GoogleマップのアプリをAppleにまだ提出していない」という発言が出たとのことです。
元々、Googleマップはウェブサービスですから、ウェブページをホーム画面に登録したり、もう少し変わったUIがよければ、OpenAppMktに色々あるようです。
http://openappmkt.com/store/search_submit?q=map
私も腕試しということでやってみました。評判が良く、要望があればもう少し続けてみようかと思っています。
ホーム画面に追加した際の終了処理の欠落問題は、PhoneGapを使うと回避できそうです。(pauseイベント)