Xcode 6.2 以上
https://developer.apple.com/xcode/downloads/
6.2からAppleWatch開発環境(watchkit)が入っています。

iOS8.2以上 (iPhone)
8.2にバージョンアップするとアプリ「Apple Watch」が追加されるのですぐわかります。

iPhoneアプリケーション プロジェクトを生成
xcode起動後、「Create a new Xcode project」を選択します。
次にiOS -> Application -> Single View Applicationを選択します。

プロダクト名をWatchKitMapとします。

Watch Kit Appを追加
Watch Kitを追加します。File -> New -> Target を選択します。

AppleWatch ->WatchKit Appを選択します。

Include Glance、Include Notification Scene は、今回使わないのでチェックを外す。

Finishiをクリックします。

Activateをクリックします。

WatchKitMap
Interface.storyboardでUIを作成します。
いつものiOS開発と同じです。Mapを貼り付けます。

Mapは画面いっぱいに表示したいのでwidthもheightもRelative to Containerにします。

位置調整はこのままです。

プログラムでの位置調整ができませんのでその点はご注意ください。

※Apple WatchにはGlance（ぱっと見る）、Notification（通知）という機能に関するものもありますが、これらについては今回は使用しません。

※今回は「Static Interface」や「Dynaminc Interface」の機能は使用しないので、特にこの部分に関しては特に追加や修正を行う必要はありません。

Mapのフラグ用の画像を1枚用意します。

Mapのソースコード
InterfaceController.mに記述します。

#import "InterfaceController.h"

@interface InterfaceController()

@property (weak, nonatomic) IBOutlet WKInterfaceMap *map;

@end

@implementation InterfaceController

- (void)awakeWithContext:(id)context {

    [super awakeWithContext:context];

    // Configure interface objects here.

    // 大阪駅の位置 中心座標の設定

    CLLocationCoordinate2D mapLocation =

                     CLLocationCoordinate2DMake(34.7003783, 135.4950484);

    // 表示範囲

    MKCoordinateSpan coordinateSpan = MKCoordinateSpanMake(0.005, 0.005);

    // 紫ピン

    [self.map addAnnotation:mapLocation withPinColor: WKInterfaceMapPinColorPurple];

    // ピンクフラグ

    [self.map addAnnotation:mapLocation withImage:[UIImage imageNamed:@"pink_flag"]

               centerOffset:CGPointMake(20, -20)];

    // 地図の表示範囲を設定

    [self.map setRegion:(MKCoordinateRegionMake(mapLocation, coordinateSpan))];

}

- (void)willActivate {

    // This method is called when watch view controller is about to be visible to user

    [super willActivate];

}

- (void)didDeactivate {

    // This method is called when watch view controller is no longer visible

    [super didDeactivate];

}

@end

起動すると大阪駅周辺の地図が表示されます。

注意事項

地図に刺せるピンの数５本まで

ピンの代わりに画像を表示しても同じ

画像はキャッシュが効きます。

WKInterfaceDevice addCacheImage

GitHub WatchKitMap

▫️参考にしたページ

WatchKitで現在位置の地図を表示する

WATCHKIT TUTORIAL: MAPS ON THE APPLE WATCH

WatchKitでWatchに画像をキャッシュする

【WatchKit】Apple WatchにWebの画像を読み込む

目　次