ドキュメントを検索

embed

チュートリアル Step 5: API キーの設定と本番公開

この Step の前提

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

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

ここまでのコードでは、CDN の URL に YOUR-API-KEY を指定していました。これは Geolonia が提供するデモキーであり、localhost、GitHub Pages、CodePen、Netlify、Vercel などの開発環境とプレビュー環境でのみ地図が描画されます（対象の一覧はデモキーで無料で試せる環境を参照してください）。

自分のドメインで公開する場合は、本番用の API キーの発行が必要です。

API キーを取得する

  1. Geolonia のダッシュボードにログインする。
  2. API キーの管理画面で新しいキーを作成する。
  3. 利用する URL を登録する（例: https://example.com）。登録した URL でのみ地図が描画されます。許可の判定はスキームとポートまで含めて行われるため、http:// と https:// は別の値として扱われます。

コードを書き換える

取得した 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 キーに登録した URL と、公開先の URL が一致しているか確認。スキーム（http:// と https://）、ホスト名（www.example.com と example.com）、ポートは、いずれか1つでも異なると別の値として扱われます。
  • ローカルでは表示されるがサーバーで表示されない → デモキー（YOUR-API-KEY）のままになっていないか確認。
  • GeoJSON だけ出ない → サーバー上に GeoJSON ファイルが配置されているか、パスが正しいか確認。

チュートリアル完了

以上で embed チュートリアルは完了です。Step 0 から Step 5 までで扱った内容は次のとおりです。

続けて参照するドキュメントは次のとおりです。