アプリに地図を追加する方法：埋め込み、インタラクティブマップ、店舗検索

アプリに地図を追加するには、まず静的な埋め込み（「店舗の場所」のような、ピンが1つだけの場所）が必要か、インタラクティブな地図（データからの多くのピン、フィルター、クラスタリング、「近くの場所」）が必要かを決めてください。場所が1つだけなら、埋め込みの地図がもっとも速く、Googleの Maps Embed APIなら無料です。インタラクティブな地図には、JavaScriptの地図ライブラリを使います。Google Maps JavaScript API、Mapbox GL JS、またはオープンソースのLeafletとタイルのプロバイダーです。各場所の緯度と経度はデータベースに保存し、APIキーは自分のドメインに制限してください。以下のベンダーの詳細は、2026年9月時点の各プロバイダーのドキュメントによるものです。

どんな地図が必要か？

ほとんどの小規模な事業サイトは、1行目だけが必要です。ディレクトリ、マーケットプレイス、掲載サイトでは、3行目と4行目が必要です。

選択肢

Google Maps Platform

Googleの開始ガイドでは、請求が有効なCloudプロジェクトを作成し、使いたいAPIを有効にする必要があるとされています。従量課金の料金では、動的マップを含むEssentials SKUに、毎月1万イベントの無料上限があり、その上では最初の階層で1,000イベントあたり7.00ドルとされています。Maps Embed SKUは、無制限かつ無料とされています。Googleは月額のサブスクリプションプランも提供しています。最新の数字はGoogle Maps Platformの料金で確認してください。

Mapbox

Mapboxの料金ページでは、Webで使うMapbox GL JSについて、毎月5万回の地図の読み込みが無料で、その後は1,000回ごとに5.00ドルとされています。Mapboxの料金を参照してください。

LeafletとOpenStreetMap

Leafletは、モバイル対応のインタラクティブな地図のためのオープンソースのJavaScriptライブラリで、約42 KBのJavaScriptだと説明されています。地図のタイル（地図の画像）をどこかから取得する必要があります。OpenStreetMapの公開タイルサーバーは魅力的に見えますが、タイルの利用ポリシーでは、目に見える帰属表示が必要で、一括ダウンロードは禁止されており、サービスの保証はなく、商用サービスはアクセスが打ち切られる可能性があると警告されています。実際のプロダクトでは、Leafletで使える商用または自己ホストのタイルのソースを使ってください。

APIキー：公開されるが、制限をかける

ブラウザで使う地図のキーは、あなたのページを開く誰からでも見えます。これは想定内ですが、誰かがキーをコピーして、あなたの請求額で利用を増やすことができるという意味でもあります。Googleのセキュリティガイダンスでは、ドメインを列挙したWebサイト（HTTPリファラー）の制限と、キーが使うAPIだけで動くようにするAPIの制限を追加することが推奨されています。

サーバー側のサービスのキー（たとえば何千もの住所のジオコーディング）は、別のキーにして、ページではなくサーバー側のシークレットに保管してください。また、ミスが大きな請求につながらないよう、プロバイダーのコンソールで予算アラートまたはクォータを設定してください。

ジオコーディング：住所を一度だけ座標に変換する

地図は、住所ではなく緯度と経度をプロットします。住所を座標に変換することをジオコーディングと呼び、ほとんどのプロバイダーはリクエストごとに課金します。効率のよいパターンは次のとおりです。

1. 掲載情報が保存されたとき、サーバーでその住所をジオコーディングする。
2. 緯度と経度をデータベースに保存する。
3. 地図は保存された座標を読み込む。ページを表示するたびにジオコーディングしない。

ジオコーディングの結果を保存できる期間については、各プロバイダーの規約を確認してください。規約は異なります。

プロンプトの例

1つの埋め込み地図の場合：

問い合わせページに、当店の住所（12 High Street, Leeds）を表示するGoogleマップの埋め込みを追加して。Maps Embed APIを使い、キーはGOOGLE_MAPS_EMBED_KEYに入れて。その下に「経路を見る」リンクを追加して。スマートフォンでは全幅にして、遅延読み込みにして。

掲載情報のインタラクティブな地図の場合：

掲載テーブルに緯度と経度を追加して。掲載が作成されたり住所が変わったりしたら、GEOCODING_API_KEYのキーを使ってサーバーでジオコーディングし、座標を保存して。閲覧ページには、Leafletを使って掲載ごとにマーカーを表示する地図を表示し、マーカーが重なるときはクラスタリングして。マーカーをクリックしたら、タイトル、価格、リンクを表示して。地図とリストは同じフィルターを使うようにして。

「近くの場所」の場合：

「近くの場所」ボタンを追加して。訪問者の位置情報を求め、10 km以内の掲載を距離順に表示して。位置情報へのアクセスを断られたら、代わりに都市名を入力できるようにして。

手順

1. 冒頭の表から地図の種類を選ぶ。
2. プロバイダーのアカウントとプロジェクトを作成し、必要なAPIだけを有効にする。
3. キーを作成する：自分のドメインに制限したブラウザ用のキー（構築中はプレビューのドメインも含む）と、必要であればジオコーディング用のサーバー用キー。
4. キーをシークレットとして保存し、ビルダーにそれを使うよう依頼する。ブラウザ用のキーはページに入りますが、それでもリファラーで制限しておく。
5. すべての場所の座標をデータベースに保存する。
6. 地図を作る：マーカー、ポップアップ、クラスタリング、適切な初期ズーム。
7. リストと組み合わせる。 地図だけでは、スマートフォンでも、スクリーンリーダーでも使いにくいです。同じ結果をリストでも表示してください。
8. プロバイダーのコンソールで予算アラートを設定する。
9. 公開して、ライブのドメインでテストする。 リファラーの制限は、ライブのドメインを追加するまで地図をブロックすることがよくあります。

よくあるミス

• キーに制限がない。 誰でも自分のサイトで再利用できてしまいます。
• ページを表示するたびにジオコーディングする。 遅く、高くつきます。保存時に一度だけジオコーディングしてください。
• キーの制限でライブのドメインを忘れる。 プレビューでは動くのに、本番では空の灰色のボックスになります。
• 地図だけのレイアウト。 リストのないピンは、小さい画面では使いにくく、アクセシブルでもありません。
• クラスタリングなしの何百ものマーカー。 読めず、遅くなります。
• 帰属表示がない。 ほとんどの地図やタイルのプロバイダーは表示を求めており、隠すと規約に違反します。
• ページの読み込み時に位置情報を求める。 利用者が「近くの場所」をタップしたときにだけ求めてください。

チェックリスト

• 用途に合った地図の種類を選んだ
• ブラウザ用のキーは、自分のドメインと必要なAPIに制限されている
• サーバー側のキーはシークレットに保管されている
• 座標はデータベースに保存され、一度だけジオコーディングされている
• 結果はリストとしても表示している
• 多数のマーカーにクラスタリングを使っている
• 帰属表示が見える
• プロバイダーで予算アラートを設定した
• 公開ドメインとスマートフォンでテストした

Mythexでの地図の追加

Mythexには、地図の組み込み機能はありません。自分のプロバイダーのキーを持ち込み、それをプロジェクトのシークレットとして追加してください（エージェントがシークレットのカードを表示したときに貼り付けることもできます）。そして、任意のAPIを連携するで説明されているとおり、チャットで地図を依頼します。座標はプロジェクトのデータベースに入れます。キーのウェブサイトの制限には、プレビューと公開ドメインの両方を追加することを忘れないでください。シークレットを変更したら、再度公開してください。

地図は通常、検索や掲載一覧と並んで使われます。アプリに検索を追加する方法、ディレクトリサイトの作り方、小規模事業のWebサイトの作り方も参考にしてください。

よくある質問