IT工房くまや

自己紹介

カテゴリー: サイト作成

  • Swift MapKit JSを触ってみました

    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>

    こんな感じです。