embed

チュートリアル 段0：地図を出す

embed チュートリアルへようこそ。embed は、Geolonia Maps の中でも最も簡単な地図表示を目指したライブラリです。この段では、HTML ファイルを1つ作って、ブラウザに地図を出すところまでをやります。

地図を表示する

embed はとにかく簡単です。1つの動く HTML ファイルがあれば、地図を表示することができます。次の内容を index.html という名前で保存してください。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>embed</title>
    <style>
      .geolonia { width: 100%; height: 400px; }
    </style>
  </head>
  <body>
    <div class="geolonia"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

上に書いた index.html が、そのまま下で動いています。

仕組みは2つだけです。

ブラウザで開く

保存した index.html をダブルクリックで開いても、地図は表示されません。デモキーは許可された環境からのアクセスでしか描画されず、ファイルを直接開いた状態（file://）はその対象外だからです。

手軽なのは、index.html を置いたフォルダで簡易ローカルサーバーを起動して、localhost として開く方法です。次のうち、手元で使えるものを使ってください。

# Node.js があるなら
npx serve

# Python があるなら
python3 -m http.server

# Windows で Python があるなら
py -m http.server

npx serve は起動時に URL を表示するのでそれを開きます。http.server の場合は http://localhost:8000/ を開きます。

すでに HTML を置いて公開している Web サーバーがあるなら、そこに index.html をアップロードしても構いません。ただしデモキーが動くのは許可された環境だけなので、その場合は段5：公開するに先に進み、自分のキーを発行して差し替えてください。

サーバーを用意せずに試したい場合は、CodePen や JSFiddle などのオンラインエディタに貼り付けても地図が出ます。ほかにどんな環境で動くかはデモキーで無料で試せる環境にまとめてあります。

動いたか確認する

場所を何も指定していないので、地図は世界全体が見える状態で表示されます。マウスのドラッグで動き、ホイールで拡大縮小できれば成功です。

うまく出ないとき
  • 真っ白で何も出ない → .geolonia の高さが 0 になっていないか。<style> の指定を確認。
  • 「地図が表示できません」のような表示 → デモキーが効かない環境で開いています。ファイルを直接（file://）開いていないか確認し、上の「ブラウザで開く」の方法で開き直してください。
  • 何も起きない → <script> の URL のつづりを確認。ネットワークがオフラインでも出ません。

次は

地図は出ました。でも、見たいのは世界全体ではなく自分の場所のはずです。次の段1：場所と視点で、地図の中心、拡大率、傾きを指定します。