[WWDC18][iOS 12] MapKit JSを使用してWebページ上の地図に注釈(マーカー)を表示する

前回の記事「MapKit JSを使用するために必要な作業について」に引き続き、WWDC18で発表されたMapKit JSを扱います。本記事では地図に注釈(マーカー)を表示する実装を紹介します。

WWDC18

#iOS

#MapKit

#iPhone

平屋真吾

2018.07.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは。モバイルアプリサービス部の平屋です。

前回の記事「MapKit JSを使用してWebページ上に地図を表示する」に引き続き、WWDC18で発表されたMapKit JSを扱います。

本記事では地図に注釈(マーカー)を表示する実装を紹介します。

本記事は Apple からベータ版として公開されているドキュメントを情報源としています。そのため、正式版と異なる情報になる可能性があります。ご留意の上、お読みください。

検証環境

本記事は以下の環境で検証を行っています。

macOS Sierra 10.13.5
Google Chrome Version 67.0.3396.87

実装

さっそく実装を紹介していきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<!-- [1] 地図を表示する (ここから)-->
<script src="https://cdn.apple-mapkit.com/mk/5.0.x/mapkit.js"></script>
</head>
<body>
<div id="map" style="height: 600px; width: 600px;"></div>
<script>
mapkit.init({
    authorizationCallback: function(done) {
        done("<Your Token>");
    }
});
var map = new mapkit.Map("map");
// [1] 地図を表示する (ここまで)

// [2] 注釈を作成する
var coordinate1 = new mapkit.Coordinate(35.6811673, 139.7670516)
var annotation1 = new mapkit.MarkerAnnotation(coordinate1);
annotation1.title = "Tokyo Station";
var coordinate2 = new mapkit.Coordinate(35.6973139, 139.7746914)
var annotation2 = new mapkit.MarkerAnnotation(coordinate2);
annotation2.title = "Classmethod";

// [3] 注釈をクリックしたときの処理を追加する
var calloutDelegate1 = {
    calloutRightAccessoryForAnnotation: function() {
        var accessoryViewRight = document.createElement("a");
        accessoryViewRight.className = "right-accessory-view";
        accessoryViewRight.href = "http://www.tokyoinfo.com/";
        accessoryViewRight.target = "_blank";
        accessoryViewRight.appendChild(document.createTextNode("ⓘ"));
        return accessoryViewRight;
    }
};
annotation1.callout = calloutDelegate1;
var calloutDelegate2 = {
    calloutRightAccessoryForAnnotation: function() {
        var accessoryViewRight = document.createElement("a");
        accessoryViewRight.className = "right-accessory-view";
        accessoryViewRight.href = "https://classmethod.jp/";
        accessoryViewRight.target = "_blank";
        accessoryViewRight.appendChild(document.createTextNode("ⓘ"));
        return accessoryViewRight;
    }
};
annotation2.callout = calloutDelegate2;

// [4] 地図に注釈(マーカー)を追加する
map.showItems([annotation1, annotation2]);

</script>
</body>
</html>