読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

iOS5マップ風ウェブアプリを作ってみました。

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にまだ提出していない」という発言が出たとのことです。

http://jp.techcrunch.com/archives/20120925eric-schmidt-google-hasnt-submitted-a-native-google-maps-app-to-apple/


元々、Googleマップウェブサービスですから、ウェブページをホーム画面に登録したり、もう少し変わったUIがよければ、OpenAppMktに色々あるようです。

http://openappmkt.com/store/search_submit?q=map


私も腕試しということでやってみました。評判が良く、要望があればもう少し続けてみようかと思っています。
ホーム画面に追加した際の終了処理の欠落問題は、PhoneGapを使うと回避できそうです。(pauseイベント)