WebサイトにGoogle マップみたいな地図を置きたい！ でも、カネがない…… そんな人に朗報！

『日本のPMTiles配布サイト』

　自分のWebサイトに「Google マップ」みたいな地図を置きたい……でも、API料金を支払う余裕はない……そんな方に朗報です。日本のPMTiles配布サイト「Japan PMTiles」から入手できるファイルをサーバーに置けば、APIキー不要、地図APIの回数課金なしで、一般的なWebサーバーで表示できるようになるそうです。

　「Google マップ」のような地図サービスでは一般的に、ズームレベルや位置ごとに分割された大量のタイルファイルが用いられています。これを1つにまとめたのが「PMTiles」ファイル（.pmtiles）です。このWebサイトでは、「OpenStreetMap」をもとに作成した地図データが用いられているのだそう。

「OpenStreetMap」のPMTilesファイルをダウンロード可能。過去にさかのぼって取得することもできる。2010年は0.1GBに過ぎないが、2026年には1.5GBにまで膨れ上がっており、データの充実を実感できる

　2026年1月1日版は1.5GBもあるので、『これを毎回すべてダウンロードするのか？』と気になる方もいらっしゃると思いますが、そこは大丈夫。「HTTP Range Request」に対応したWebサーバーであれば、表示に必要な部分だけを取得できるため、ファイル全体を毎回ダウンロードする必要はありません（サーバースペースは占有しますが）。

　使い方も簡単で、とりあえず動かすだけであればPMTilesファイル、スタイルJSONファイル、サンプルHTMLファイルを同じフォルダーへ置き、「HTTP Range Request」に対応するWebサーバーで公開するだけです。公開した地図は拡大・縮小したり、傾けたりすることもできます。

とりあえず「ChatGPT」に「HTTP Range Request」対応Webサーバーを用意してもらい、動かしてみました

マウスホイールをクリクリしたり、左右ボタンでぐりぐりとドラッグしてみてください。地図を操作できます

　「Google マップ」の機能すべてを置き換えられるわけではありませんが、オープンソースのTypeScriptライブラリ「MapLibre」を利用すれば、マーカーやポップアップの表示、GeoJSONの重ね合わせといった機能も追加できるそうです。「Qiita」に解説記事も掲載されているので、ぜひ試してみてください。

「Google マップ」の機能すべてを置き換えられるわけではない

　「Google マップ」の無料枠を超えてしまう心配なく利用できるのは、精神的にありがたいですね。商用可能なのもうれしいところ。

　ただし、ファイルはかならず自分のサーバーでホストすること（『日本のPMTiles配布サイト』から直接リンクしない）、地図を表示する際は、「OpenStreetMap」への帰属表示（© OpenStreetMap contributors）を削除しないこと、この2点だけは守るようにしてください。