TRUSTART株式会社でエンジニアとして働いているnagashunです！
最近はYouTubeでキャンプ系の動画を見ることにハマっていて、今度3年ぶりにキャンプに行ってみようかなと画策しています！
さて、今回は旅行やお出かけでもよく使う「地図」についての記事です。
日常使いとして、知らない場所に行くときにはよく使用しますが、エンジニアだったら一度は地図を使用したアプリの開発を考えたことがある方も多いのではないでしょうか？
よく聞くのはGoogle Mapsだったりしますが、他に選択肢はないのでしょうか？
むしろなぜGoogle Mapsを選択する場合が多いのでしょうか？
今回はそんな「地図」のwebサービス導入について改めて調べてみました！
Webサービスに地図を導入する際に必要なもの
Webサービスに地図を表示し、操作する機能を実装する際には主に以下の技術の選定・導入が必要です。
必須
- 地図ライブラリ
- 地図を表示、操作するフロントエンドの部品
- ズーム、スクロール、マーカーの設置、ポップアップの表示など
- 例）Google Maps API、Leaflet、MapLibre GL JS、OpenLayersなど
- タイルサーバー
- 地図の背景画像データを配信するサーバー
- ライブラリからのリクエストに応じて、タイル画像を返す
- 例）OpenStreetMap, 国土地理院地図, MapTilerなど
その他、必要に応じて用意するもの
- ジオコーディング (Geocoding) API
- 住所→緯度経度変換や緯度経度→住所変換などを行う
- ルート検索 (Routing) API
- A地点からB地点までの最適な経路、距離、所要時間を計算する機能
- 地図上で表現したいデータ (POIデータなど)
- 地図上に表示したい独自のデータ
- 例）飲食店のデータ、建物のデータ、土地の価格（公示価格）データ、防災・ハザードデータなど
エンジニア始めたての個人開発時代にはGoogle Maps Platformなどを使用することで、これらの各部品をあまり意識せずとも使えてしまっていましたが、改めて必要なものを見ると、選定の組み合わせのパターンは多そうですね...
どれを選べば良いのか迷ってしまいそうです。
組み合わせ例3つ
名だたる企業から有志まで様々な方が提供している地図ライブラリやタイルサーバーが存在します。
ここでは組み合わせの例を大きく3つまとめてみました！
※筆者が調べた範囲内での組み合わせのため、もしかするともっと良い組み合わせがある可能性もあります
※必須の「地図ライブラリ」「タイルサーバー」の組み合わせのみを対象としています
Google Maps Platformで全てオールインワン利用をする
構成例
- 地図ライブラリ: Google Maps JavaScript API
- タイルサーバー: Google Maps
メリット
- APIキー1つで導入が可能
- Googleが収集した豊富なデータを使用可能
- ドキュメントや事例が豊富で問題が起きても解決しやすい
メリットは圧倒的な導入のしやすさです。
とりあえずAPIキーさえあれば、Googleの提供する便利な機能、豊富なデータを活用することができます。
デメリット
- 料金が他のサービスに比べて高価
- カスタマイズ性に制限がある
デメリットとして1番ネックになるのは、やはり料金です。
手軽に便利な機能が導入できる一方で、コストとしては最も高額となる可能性が高いです。
▼公式ページでは料金のシミュレーションも可能です
2025年3月1日には一律200ドルの無料枠が廃止され、APIごとのリクエスト回数による無料枠に変更されたようです。
これにより、以前に比べて料金も変動しているようです。
以前と比較した料金改定による影響（参考）
- 特定のAPIを集中して使用する場合
- コスト増加の可能性
- 様々なAPIを試す場合
- 全体の無料枠を考えることなく、試せるハードルが下がった
- 大規模利用者の場合
- APIごとの利用量が増えることで、単価が安くなる
- これによりコストが以前よりも下がる可能性
Leaflet.js✖︎OpenStreetMap（or地理院地図）で全て無料で導入
なるべく費用を抑えたい場合はLeaflet.js✖︎OpenStreetMap（or地理院地図）で構成すると基本的な地図機能を無料で実装することができます。
Leaflet.jsはnpmのダウンロード数やスター数でも他のライブラリを圧倒しています。
メリット
- 軽量で高速なライブラリ
- シンプルに実装できる（数行で地図表示が可能）
- 拡張性が高い（豊富なプラグインが利用可能）
- 無料で商用利用もOK
人気の理由は**「軽量で高速・シンプル・拡張性が高い・無料」な点が挙げられます。
上記の点から無料で地図ライブラリを導入するなら、Leaflet.jsが適している**可能性が高いです。
デメリット
- 3D表示や高度なアニメーションは苦手
- ベクタータイルの対応が限定的
- 公式サポートがない（コミュニティベース）
- 複数のプラグインを組み合わせると複雑化する可能性
デメリットとして特に注意すべきは、最新の地図技術（3D、ベクタータイル）では他のライブラリに劣る点です。
また、OSSのため問題発生時は自己解決が基本となります。
同じく無料であるOpenStreetMapはWikipediaのようにユーザーが日々データを更新し続けているタイルサーバーです。
Wikipediaと同じように、更新されるデータの正確性や地域による更新のバラつきは多少許容する必要があります。
例えば、東京や大阪などの都市部では建物や道路情報が充実していますが、地方都市では店舗情報が不足していたり、最新の道路建設が反映されていない場合があります。
また、海外では国によってデータ品質に大きな差があるのが現状のようです。
一方、**地理院地図（国土地理院）**は日本国内に限定されますが、国の機関が提供する高精度な地形データが魅力です。
登山・アウトドア系アプリや防災アプリなど、詳細な地形情報が必要な用途では非常に有用な選択肢となります。
実際に登山アプリであるYAMAPなどにも使われていますね！
その他の選択肢
上記2つ以外にも、コストと導入しやすさのバランスを考えた別の構成を取ることもできます。
パターン1: Leaflet.js ✖ 有料タイルサーバー
コスト重視だけど品質も欲しい場合
無料で軽量なLeaflet.jsと、MapTilerやMapboxの有料タイルサーバーを組み合わせる方法です。
企業が運営する信頼できるタイルデータを使いつつ、ライブラリは無料で済ませることができます。
パターン2: MapTiler SDK / Mapbox GL JS
導入しやすさ重視の場合
Google Mapsのように、ライブラリとタイルサーバーがセットになったオールインワンサービスです。
MapTiler SDKやMapbox GL JSなど、専用ライブラリを使って実装します。
どちらを選ぶ？
個人的には、本格的にサービスをスケールさせるなら、パターン2の方が楽だと感じました！
理由は、ドキュメントが一箇所にまとまっていて、APIキー1つで全部完結するからです。
コストは少し高くなりますが、開発速度や保守性を考えると、結果的にお得かもしれません。
最後に
なんでこの技術選定しているだっけ？みたいなものって意外に多いと思うので、改めて調べる良い機会になりました！
また個人的に地図を使ったサービスをいじって、最適な組み合わせを選んだり、スケールに当たってリプレイスするなんて経験も積んでみたいな〜と思いました！
TRUSTART株式会社は、一緒に働くメンバーを募集しています！
インターンメンバーも大募集中です！
興味を持っていただいた方は、ぜひ弊社のページをご確認ください！！！
「人とデータで全てを可能にする」 不動産領域に関連する、あらゆるビジネスのDX化にチャレンジし、「テクノロジー×人」の力で社会課題を解決するTRUSTART株式会社のテックブログです！ 採用情報はこちら：trustart.co.jp/recruit/
Discussion