このページの本文へ

PhoneGapでMapKitを使って地図アプリを開発 (3/4)

2011年09月09日 11時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

MapKitプラグインをダウンロードする

 Googleマップを利用した地図は「ページ内に埋め込まれた」状態になり、他のHTML要素と同様に扱われるので、ページ内に地図を表示したいときはGoogleマップを利用するのがよいでしょう。一方、地図を画面内に固定して扱いたい場合はiOSのMapKitを使うと便利です。

 PhoneGapでMapKitを呼び出すには、機能拡張用のプラグインを利用します。PhoneGapのプラグインは以下のページからダウンロードできます(MapKit以外のプラグインも一括してダウンロードできます)。

 上記のページにアクセスすると右上に「Download」のボタンがあるのでクリックします。

【図】10.psd

Downloadボタンをクリック

 ダイアログが表示され、どの形式でダウンロードするかを選択する画面になります。ここでDownload.zipをクリックします。

【図】11.psd

Download.zipボタンをクリック

【図】12.png

ダウンロードが開始される

 ダウンロードが終了するとダウンロードフォルダにファイルが展開されます。iPhone/MapKitPlugフォルダのsrcフォルダにプラグインとして利用するファイル一式が入っています。

【図】13.png

iPhone/MapKitPkug/src/に必要なファイルが一式入っている

 srcフォルダ内にある拡張子が.hと.mのファイルをプロジェクトウィンドウのPluginsフォルダにドラッグ&ドロップします。

【図】14.png

.h, .mファイルをpluginsフォルダに入れる

 以下のダイアログが表示されます。図のように設定し「追加」ボタンをクリックします。

【図】15.png

設定し「追加」ボタンをクリックする

 プロジェクトがあるwwwフォルダにMapKitPlug.jsファイルをドラッグ&ドロップします。

【図】16.psd

MapKitPlug.jsファイルをwwwに入れる

 以下の手順に従って、MapKitライブラリ(MapKitフレームワーク)をプロジェクト内に読み込ませます。

【図】17.psd

ターゲットのカテゴリの▲をクリック。アプリケーション名が表示されるのでクリックして選択

【図】18.png

右ボタンをクリック(ctrlキーを押したままクリック)してメニューを表示。メニュー項目から「情報を見る」を選択

【図】19.psd

情報ウィンドウが表示される。「一般」のタブをクリック

【図】20.psd

ウィンドウの左下の「+」ボタンをクリック

【図】21.psd

MapKit.frameworkの項目を選択し「追加」ボタンをクリック

【図】22.psd

MapKit.frameworkの項目が追加されているのを確認

 以上でMapKitを使うための準備ができました。

MapKitを呼び出す

 JavaScriptからMapKitを使用してみましょう。wwwフォルダ内にあるMapKitPlug.jsファイルを以下のようにしてscriptタグで読み込ませます。


<script type="text/javascript" charset="utf-8" src="MapKitPlug.js"></script>

 bodyタグにonloadイベントを記述し、onBodyLoad関数を呼び出します。なお、この書き方はPhoneGapのサンプルコードに倣ったものですが、window.onloadやwindow.addEventListener("load",~,false)でも問題なく動作します。


<body onload="onBodyLoad()">

 onBodyLoad関数を用意します。以下のようにdevicereadyイベントを捕捉し、devicereadyイベントが発生したらonDeviceReady関数を呼び出します。PhoneGapではHTMLページが構築された時点では必要なライブラリファイルが完全に読み込まれていない場合があるので、ライブラリの読み込みが終了したらdevicereadyイベントを発生させます。MapKitに限らず、カメラなどのPhoneGapが用意している機能を利用する場合は、必ずdevicereadyイベントが発生した後に処理する必要があります。


function onBodyLoad()
{ 
  document.addEventListener("deviceready",onDeviceReady,false);
}

 onDeviceReady関数内にMapKitを利用して地図を表示するスクリプトを書きます。MapKitで地図を表示する場合はwindow.plugins.mapKit.showMap()だけですが、表示する位置などはwindow.plugins.mapKit.setMapData()を使います。

 window.plugins.mapKit.setMapData()の最初の引数にはマーカー(アノテーション)の情報が入ったオブジェクトを配列で指定します。マーカーを表示しない場合は[ ] として空の配列を指定しておきます※1

 2番目の引数は地図表示に関するオプションです。optionsオブジェクトに必要な情報を入れて渡します。heightはMapKit表示の際の縦幅です。横幅は画面サイズに自動調整されるのでwidthを指定しても反映されません。

 diameterは地図の縮尺を示します。値が小さいほど拡大された地図です。地図の縮尺として1/32000と指定するのと同じような意味になります。

 lat, lonは地図の中心となる緯度経度です。今回は富士山が中心になるように座標を設定しています。

 これでMapKitを使った地図のスクリプトができました。

【図】23.png

MapKitを利用するプログラム


function onDeviceReady()
{
  var options = {
      height: 460,
      diameter: 40000,
      lat: 35.3628410163896,
      lon: 138.73156428337097
    }
  window.plugins.mapKit.showMap();
  window.plugins.mapKit.setMapData([],options);
}

 iOSシミュレータで動作を確認します。無事に地図が表示されればOKです。

【図】24.png

MapKitを利用した地図が表示される

 map-close-button.pngファイルをwwwフォルダに入れると、地図にクローズボタンを付けられます。画像を追加して再度シミュレータで確認すると、地図の右上にクローズボタンが表示されているはずです。

【図】25.psd

map-close-button.pngファイルをwwwフォルダにドラッグドロップ

【図】26.png

地図の右上にクローズボタンが表示されている



※1 MapKitの最新版ではwindow.plugins.mapKit.addMapPins()メソッドを使ってアノテーションを追加するようになっているようです。このため最初の引数に配列は指定せずwindow.plugins.mapKit.setMapData(options)として指定してみてください)。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く