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

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

WWDC18

#iOS

#MapKit

#iPhone

平屋真吾

2018.07.01

この記事は公開されてから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>