Googleマップで「エリア地図」を作ろうとして詰まったら

「対応エリアを地図で見せたい」「都道府県をクリックしたら、その県のページに飛ばしたい」。こういう地図を作ろうとして、まずGoogleマップを埋め込もうとする人は多いです。地図といえばGoogleマップ、という発想は自然なのですが、県や地域エリアを塗ってリンクさせる用途には、Googleマップ埋め込みは向きません。 ここで無理に頑張るより、クリックできるSVGの日本地図を使う方が素直です。

ただし「Googleマップがダメ」という話ではありません。地点を出す、道順を出すという本来の用途では、Googleマップは強い。問題は用途のミスマッチなので、まずそこを整理します。

Googleマップが得意なのは「点」、エリア導線で困るのは「面」

Googleマップが圧倒的に得意なのは、実際の地点を示すことです。「うちの店はここにあります」とピンを立てる、現在地からの経路を案内する、最寄り駅からの道順を見せる。この用途なら他に代えがききません。店舗ページやアクセス情報には、迷わずGoogleマップを埋め込めばいいと思います。

つまずくのは、ここから「全国の対応エリアを塗り分けて、エリアごとに別ページへ飛ばしたい」という方向に進んだときです。Googleマップはあくまで「実際の場所の地図」なので、面（エリア）を自由に塗ってクリックさせる作りには向いていません。やれなくはないのですが、無理が出ます。

理由はいくつかあります。エリアを色分けして描こうとすると、JavaScript API側でポリゴンを描画する話になり、APIキーの取得と請求の管理が前提になります。無料枠を超えれば課金されるので、アクセスが増えるほど運用コストが読みにくくなる。表示も、地図タイルを読み込む分だけ動作が重くなりがちです。そして肝心の「都道府県を塗って、その県だけ別ページにリンクさせる」という作りが、Googleマップの埋め込みでは素直に組めません。位置情報を見せるための道具なので、当然といえば当然です。

「店舗の場所を見せる」ためのGoogleマップを、「エリア別の入口を作る」ために流用しようとするから無理が出る、というのが実態に近いです。

エリアの入口を作るなら、クリックできる日本地図が素直

やりたいことが「全国のどのエリアからでも、該当ページに入ってもらう」なら、最初からクリックできるSVGの日本地図を使う方が回り道がありません。Googleマップのような実地図ではなく、都道府県や市区町村の形だけを持った、リンクのための地図です。

この用途で何が楽になるか、具体的に言うと次のあたりです。

WordPressでこれをやるなら、Japan Clickable Map のような地図作成プラグインが分かりやすいです。管理画面で表示する範囲を選び、必要な県だけ色とリンクを設定して保存すると、そのマップにIDが振られます。あとは固定ページや投稿にこの1行を貼るだけです。

[jcm_map id="マップID"]

id には自分が作ったマップのIDを入れます。ショートコードが苦手なら、ブロックエディタで「クリッカブル地図」ブロックを置いて、一覧からマップを選んでもいい。リンクはURL直書きのほか、サイト内の固定ページや投稿をIDで参照できるので、後からパーマリンクを変えてもリンク切れになりにくいです。

ひとつだけ補足すると、同梱の地図は国土交通省「国土数値情報（行政区域データ）」を加工したもので、地図を載せるページに出典表記を入れる必要があります（プラグインは自動では出しません）。商用利用はできますが、ここはフッターなどに一行添えておくのを忘れずに。

結論は「両方使う」でいい

整理すると、こうなります。

実際、両方を併用しているサイトは多いです。トップや一覧ページにクリックできる日本地図を置いてエリアの入口を作り、各店舗の詳細ページではGoogleマップで正確な場所と道順を見せる。役割を分ければ、どちらの強みも消えません。

「Googleマップでエリア地図を作ろうとして無理がある」と感じているなら、その感覚は正しいです。エリアの入口づくりだけ、クリックできる日本地図に任せる方法があります。

Japan Clickable Map の詳細や導入は 製品ページで確認できます。