地図の表示

このページでは以下の方法について説明しています。

地図を表示する方法

対象クラス

実装サンプル

こちらをご覧ください。

実装方法

地図を表示する

scriptタグを用いて/v2/map_scriptを呼び出します
地図を初期化します
※第一引数には、APIのクライアントIDを指定してください。
地図を表示する領域を確保します
bodyタグが完全にロードし終わったタイミングで (2)の処理を行っている関数を呼び出します

地図の測地系について

/v2/map_scriptで扱う地図では世界測地系を採用しています。
日本測地系に基づいたデータをご利用になる場合はこちらを参考に測地系変換を行ってください。

緯度経度指定について

LatLngオブジェクトを生成する際は度表記の緯度経度を用いる必要があります。
ミリ秒表記の緯度経度をご利用になる場合はこちらを参考に度表記への変換を行ってください。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>地図の表示</title>
        <!-- (1)APIの呼び出し -->
        <script src="https://{HOST}/{CID}/v2/map_script?host={example.com}&signature={XXXXXXXXX}&request_code={YYYYYYYYY}"></script>
        <script>
            function initMap(){
                // (2) 地図を初期化
                const map = new mapscript.Map('{CID}', {
                    target: '#map', // 対象のDOM要素またはセレクタを指定してください
                    center: new mapscript.value.LatLng(35.68081, 139.76779), // 地図を表示する際中心となる緯度経度を指定してください
                    zoomLevel: 15 // ズームレベルを指定してください
                });
            }
        </script>
    </head>

    <!-- (4)初期化関数の呼び出し -->
    <body onload="initMap()">
        <!-- (3)地図を表示する領域の確保 -->
        <div id="map" style="height: 500px; width: 500px;"></div>
    </body>
</html>

初期化を行うときのパラメータについて

地図を初期化する際 target / center / zoomLevel パラメータの指定は必須となりますが、他にもオプショナルで指定できるパラメータがあります。
詳しくはこちらをご覧ください。