embed

チュートリアル 段1：場所と視点

前の段でできたこと

段0で、HTML 1ファイルから地図を出せるようになりました。ただし場所は既定の世界全体のまま。この段では、地図を自分の見たい場所と見たい角度にします。

場所と拡大率を指定する

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-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>

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

動いたか確認する

中心が東京タワーになり、地図が斜めから見た構図になっていれば成功です。data-lat / data-lng を自分の場所に差し替えて、狙った場所が中心に出ることも確かめてください。

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

次は

地図を自分の場所にできました。でも、のっているのは中心の点ひとつだけです。次の段2：データを載せるで、自分のデータ（複数の地点）を地図に重ねます。