embed

チュートリアル Step 1: 初期位置とズームの設定

この Step の前提

Step 0 を終えて、HTML ファイル1つで地図が表示できる状態から始めます。この時点の表示範囲は既定の世界全体です。この Step では、表示する場所と視点の角度を指定します。

場所と拡大率を指定する

embed の設定は、すべて div の data-* 属性で書きます。場所は data-lat（緯度）と data-lng（経度）、拡大率は data-zoom です。

<div class="geolonia"
     data-lat="35.658581" data-lng="139.745438" data-zoom="16"></div>

data-lat / data-lng：地図の中心の緯度と経度。上の値は東京タワーの座標です。任意の地点の座標は、Google マップなどで右クリックすると取得できます。
data-zoom：拡大率。数字が大きいほど寄ります。目安は、11 で都市の全体、14 で街区、16 で建物が見えるくらいです。

視点を傾けて回す

平面図だけでなく、視点の角度も指定できます。傾きは data-pitch、回転は data-bearing です。ここまでの指定を反映した index.html の全体が次のコードです。

<style>
  .geolonia { width: 100%; height: 100vh; }
</style>

<div class="geolonia"
     data-lat="35.658581" data-lng="139.745438" data-zoom="16"
     data-pitch="45" data-bearing="20"></div>

<script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>

data-pitch：地図を手前に倒す角度（度）。0 が真上からの平面図。
data-bearing：地図を回す角度（度）。0 が北が上。

上のコードは、そのまま下で動作しています。東京タワーを、45度傾け、少し回転させた視点で表示しています。

動いたか確認する

中心が東京タワーになり、地図が斜めから見た表示になっていれば成功です。data-lat と data-lng を任意の座標に差し替え、指定した地点が中心に表示されることも確認してください。

うまくいかないとき

中心が海や別の国に飛ぶ → 緯度と経度を取り違えています。日本国内なら data-lat はおよそ 24〜46、data-lng はおよそ 123〜146 です。
属性を書いたのに反映されない → 属性名のつづりを確認（間違った属性は、エラーを出さずに無視されます）。値は数字だけを書きます（"35.65" のように単位や度記号は付けない）。

次の Step

以上で、初期位置とズームの設定は完了です。この時点で地図に表示されているのは中心の1点だけです。次の Step 2: マーカーとデータの追加で、複数の地点データを地図に重ねます。