embed

チュートリアル 段5：公開する

前の段でできたこと

段0〜4で、地図の表示、場所の指定、データの表示、スタイルの変更、ポップアップまでできました。この段では、作った地図を自分のドメインで公開します。

デモキーと本番キーの違い

これまでのコードでは、CDN の URL に YOUR-API-KEY と書いていました。これは Geolonia が用意したデモキーで、localhost や GitHub Pages・CodePen・Netlify・Vercel などの開発・プレビュー環境で動きます（詳しくはこちら）。

自分のドメインで公開するには、本番用の API キーを発行する必要があります。

API キーを取得する

  1. Geolonia のダッシュボードにログインする。
  2. API キーの管理画面で新しいキーを作成する。
  3. 利用するドメインを登録する（例：example.com）。登録したドメインでのみ地図が描画されます。

コードを書き換える

取得した API キーで YOUR-API-KEY を差し替えます。それ以外のコードは変わりません。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Map</title>
    <style>
      .geolonia { width: 100%; height: 400px; }
    </style>
  </head>
  <body>
    <div class="geolonia"
         data-lat="35.68" data-lng="139.75" data-zoom="11"
         data-marker="off"
         data-geojson="/data/sample-spots.geojson"
         data-cluster="on">
    </div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-REAL-API-KEY"></script>
  </body>
</html>

YOUR-REAL-API-KEY の部分を、ダッシュボードで取得した実際のキーに置き換えてください。

公開する

embed は HTML ファイルだけで動くので、ビルドは不要です。ファイルをそのまま静的ホスティングにアップロードすれば公開できます。

GeoJSON ファイルも忘れずに同じサーバーに置いてください（data-geojson のパスが解決できる場所）。

動いたか確認する

公開した URL をブラウザで開いて、地図が表示されれば成功です。

うまくいかないとき
  • 「地図が表示できません」と出る → API キーに登録したドメインと、実際のドメインが一致しているか確認。www.example.com と example.com は別のドメインとして扱われます。
  • ローカルでは出たのにサーバーで出ない → デモキー（YOUR-API-KEY）のままになっていないか確認。
  • GeoJSON だけ出ない → サーバー上に GeoJSON ファイルが配置されているか、パスが正しいか確認。

チュートリアル完了

おめでとうございます。embed チュートリアルはこれで完了です。

段0〜5を通して、次のことができるようになりました。

さらに詳しく知りたいときは、次のリソースが参考になります。