[WWDC18][iOS 12] MapKit JSを使用してWebページ上に地図を表示する #WWDC18

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

はじめに

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

前回の記事「MapKit JSを使用するために必要な作業について」に引き続き、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] MapKit JSのスクリプトを埋め込む -->
<script src="https://cdn.apple-mapkit.com/mk/5.0.x/mapkit.js"></script>

</head>
<body>

<!-- [2] 地図用のコンテナを作成する -->
<div id="map" style="height: 600px; width: 600px;"></div>

<script>

// [3] MapKit JSを初期化する
mapkit.init({
    authorizationCallback: function(done) {
        done("<Your Token>");
    }
});

// [4] Mapオブジェクトを作成する
var map = new mapkit.Map("map");

// [5] 地図の表示範囲を指定する
var tokyo = new mapkit.CoordinateRegion(
    new mapkit.Coordinate(35.6811673, 139.7670516),
    new mapkit.CoordinateSpan(0.04, 0.04)
);
map.region = tokyo;

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

[1] MapKit JSのスクリプトを埋め込む

scriptタグを追加してスクリプトを埋め込みます。

[2] 地図用のコンテナを作成する

divタグを追加して地図用のコンテナを作成します。idは[4]で指定するものと同じidを指定します。

[3] MapKit JSを初期化する

initメソッドを使用して初期化処理を行います。authorizationCallback内で、前回の記事で作成したAuthorization Tokenを渡します。

[4] Mapオブジェクトを作成する

idを指定してMapオブジェクトを作成します。

[5] 地図の表示範囲を指定する

Regionを地図に設定して、表示範囲を指定します。

さいごに

本記事では地図を表示する実装を紹介しました。

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

参考資料