maps-react

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

前の段でできたこと

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

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

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

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

API キーを取得する

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

コードを書き換える

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

<Map
  apiKey="YOUR-REAL-API-KEY"
  center={[139.75, 35.68]}
  zoom={11}
  containerStyle={{ width: "100%", height: "100vh" }}
>
  ...
</Map>

API キーは地図の描画に使う公開可能なキーですが、ドメイン制限を設定しておくことで、他のサイトからの無断利用を防げます。

ビルドして公開する

React アプリはビルドすると静的ファイルになります。Vite の場合：

npm run build

dist/ ディレクトリに HTML、JS、CSS が出力されるので、これを静的ホスティングに置けば公開できます。

public/data/ に置いた GeoJSON はビルドで dist/data/ にコピーされるので、そのまま一緒に公開されます。

動いたか確認する

公開した URL をブラウザで開いて、これまで作ってきた地図（色分けされた点とポップアップ）が表示されれば成功です。

うまくいかないとき
  • 「地図が表示できません」と出る → API キーに登録したドメインと、実際のドメインが一致しているか確認。www.example.com と example.com は別のドメインとして扱われます。
  • ローカルでは出たのに本番で出ない → デモキー（YOUR-API-KEY）のままになっていないか確認。
  • データだけ出ない → GeoJSON の URL が本番でも解決できるか確認。サブディレクトリ配下に公開した場合は、/data/... のような絶対パスが合わなくなることがあります（Vite の base 設定を確認）。

チュートリアル完了

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

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

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