JavaScriptを使ってWebサイトに地図を埋め込めるフレームワークです。
利用にはApple Developer Accountが必要です。取得するにはApple Developer Program（詳しくはこちら）に登録しなければなりません。年間登録料（99米ドル）が必要です。
サポートしているブラウザは下記です。
- Firefox 79 以降
- Google Chrome 109 以降 (デスクトップモードのみ)
- Microsoft Edge
- Safari 13.1 以降
下記のサイトを参考に触ってみました。
参考サイト
https://developer.apple.com/documentation/mapkitjs/creating_a_maps_token?changes=latest_minor（英語）はTokenの取得の仕方がわかります。
https://developer.apple.com/jp/maps/sample-code/（日本語）はサイトへの載せ方がわかります。HTMLドキュメント（Java Script付きです）のサンプルがあります。
地図の埋め込みのサンプルを使って、下記のコードを埋め込むと
<style>
#map-container {
width: 100%;
height: 600px;
}
</style>
<script
src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js"
crossorigin async
data-callback="initMapKit"
data-libraries="map"
data-token="ここは取得したTokenです。"
></script>
<script type="module">
// Wait for MapKit JS to be ready to use.
const setupMapKitJs = async() => {
// If MapKit JS is not yet loaded...
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
// ...await <script>'s data-callback (window.initMapKit).
await new Promise(resolve => { window.initMapKit = resolve });
// Clean up.
delete window.initMapKit;
}
};
/**
* Script Entry Point
*/
const main = async() => {
await setupMapKitJs();
const kobe = new mapkit.CoordinateRegion(
new mapkit.Coordinate(34.69, 135.1955),
new mapkit.CoordinateSpan(0.1, 0.1)
);
// Create a map in the element whose ID is "map-container".
const map = new mapkit.Map("map-container");
map.region = kobe;
};
main();
</script>
<body><div id="map-container"></div></body>こんな感じです。
コメントを残す