【開発】Apple Watchの画面に地図/マップを表示する

ここではiPhone/iPad/Apple Watchの開発環境であるXcode 6.3.1 (英語版)を使って画面に地図/マップを表示するまでの手順を説明します。
なお、Xcode起動からプロジェクト作成、WatchKitの追加までの手順は「【開発】Apple Watchの画面に文字を表示する」のページと同じですので省略しています。
まず、図の矢印で示すフォルダをクリックして展開します。

Interface.storyboardのアイコンをクリックします。クリックすると図のような画面になります。

次にUI一覧からMapを探し出します(下の方にあります)。見つかったらアイコンをInterfaceの領域までドラッグ&ドロップします。

図のような画面になればOKです。

地図/マップの表示サイズを大きくしたい場合は□(ハンドル)をつかんで調整します。

次に矢印で示すアシスタントエディタのボタンをクリックします。

図のような画面になります。もし、プログラムが表示されない場合は他のストーリーボード、例えばMain.storyboardをクリックしてください。その時点でコードが表示されたら、サイドInterface.storyboardをクリックすれば表示されます。それでも駄目なら一度XCodeを終了させて再度起動させてください。
コードが表示されたら、先ほど配置したMapのUI部品上でctrlキーを押したままマウスの左ボタンを押します。そのままマウスを移動させプログラムコードの最後の}の上の行まで移動します。移動したらマウスのボタンを離します。

すると図のようなポップアップが表示されます。Name欄は自動的に文字を入力する状態になりますので、ここに名前を入力します。ここではmyMapとしています。入力したら「Connect」ボタンをクリックします。

図のようになっていれば大丈夫です。

次に上の方の行に移動し「import MapKit」と入力します。

以下のコードを図の場所に入力します。なお、緯度経度は長野県塩尻市の塩尻駅になっています。また、ズームサイズは0.01を指定していますが、この値を大きくすると地図はズームアウトした状態になります。値が小さいと地図は拡大、ズームインした状態になります。以下のコード中で赤文字になっているmyMapは、さきほど入力した名前になります。もし、先ほど異なる名前を入力したのであれば、このmyMapの部分を入力した文字に変更してください。

override init() {
super.init()
// 座標の指定
let coordinate = CLLocationCoordinate2DMake(36.114336,137.947822)
let span = MKCoordinateSpanMake(0.01, 0.01)
let region = MKCoordinateRegionMake(coordinate, span)
myMap.setRegion(region)
}

あとは実行して動作を確認します。最初にシミュレーターで確認します。Productメニューから「Run」を選択します。

シミュレーター上に地図が表示されます。

実際にApple Watchで動作するか確認します。あらかじめiOSでの開発に必要な証明書などのファイルは用意されているものとします。Apple Watchと連携しているiPhoneなどの端末をMacに接続します。
接続を確認したら図のポップアップメニューからiPhoneの実機を選択します。次にApple Watchのロックを解除しておきます。解除しないとエラーのダイアログが表示されます。Productメニューから「Run」を選択します。

しばらくして、Apple Watchに地図が表示されます。なお、この地図はタッチしたまま移動させたり、デジタルクラウンでズームすることはできません。ただし、タッチするとマップアプリに切り替わるようになっています。

メニューに戻る