MapKitプラグインをダウンロードする
Googleマップを利用した地図は「ページ内に埋め込まれた」状態になり、他のHTML要素と同様に扱われるので、ページ内に地図を表示したいときはGoogleマップを利用するのがよいでしょう。一方、地図を画面内に固定して扱いたい場合はiOSのMapKitを使うと便利です。
PhoneGapでMapKitを呼び出すには、機能拡張用のプラグインを利用します。PhoneGapのプラグインは以下のページからダウンロードできます（MapKit以外のプラグインも一括してダウンロードできます）。
- PhoneGap Plugin
- https://github.com/purplecabbage/phonegap-plugins
上記のページにアクセスすると右上に「Download」のボタンがあるのでクリックします。
Downloadボタンをクリック
ダイアログが表示され、どの形式でダウンロードするかを選択する画面になります。ここでDownload.zipをクリックします。
Download.zipボタンをクリック
ダウンロードが開始される
ダウンロードが終了するとダウンロードフォルダにファイルが展開されます。iPhone/MapKitPlugフォルダのsrcフォルダにプラグインとして利用するファイル一式が入っています。
iPhone/MapKitPkug/src/に必要なファイルが一式入っている
srcフォルダ内にある拡張子が.hと.mのファイルをプロジェクトウィンドウのPluginsフォルダにドラッグ＆ドロップします。
.h, .mファイルをpluginsフォルダに入れる
以下のダイアログが表示されます。図のように設定し「追加」ボタンをクリックします。
設定し「追加」ボタンをクリックする
プロジェクトがあるwwwフォルダにMapKitPlug.jsファイルをドラッグ＆ドロップします。
MapKitPlug.jsファイルをwwwに入れる
以下の手順に従って、MapKitライブラリ（MapKitフレームワーク）をプロジェクト内に読み込ませます。
ターゲットのカテゴリの▲をクリック。アプリケーション名が表示されるのでクリックして選択
右ボタンをクリック（ctrlキーを押したままクリック）してメニューを表示。メニュー項目から「情報を見る」を選択
情報ウィンドウが表示される。「一般」のタブをクリック
ウィンドウの左下の「＋」ボタンをクリック
MapKit.frameworkの項目を選択し「追加」ボタンをクリック
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を使った地図のスクリプトができました。
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です。
MapKitを利用した地図が表示される
map-close-button.pngファイルをwwwフォルダに入れると、地図にクローズボタンを付けられます。画像を追加して再度シミュレータで確認すると、地図の右上にクローズボタンが表示されているはずです。
map-close-button.pngファイルをwwwフォルダにドラッグドロップ
地図の右上にクローズボタンが表示されている
※1 MapKitの最新版ではwindow.plugins.mapKit.addMapPins()メソッドを使ってアノテーションを追加するようになっているようです。このため最初の引数に配列は指定せずwindow.plugins.mapKit.setMapData(options)として指定してみてください）。
