Mapboxとは？料金・ライセンスとGL JS v3の実装手順、Google Mapsとの選び分け

Mapboxは、Webサイトやアプリに見た目を作り込んだ地図表示・経路検索・住所検索を組み込むための位置情報プラットフォームです。地図をベクタタイルとスタイル定義で描くため、道路の色やラベルの出し方まで自社の画面に合わせて変えられます。この記事では、2026年10月21日時点の最新版Mapbox GL JS 3.33.0を前提に、トークン発行から業務データを地図に重ねるまでのコード、map load単位の料金の数え方と試算、v2以降のライセンスとMapLibreとの関係、Google Maps Platformとの選び分けを扱います。地図機能を持つ業務システムやWebサービスの技術選定を任された方に向けた内容です。

まとめ：Mapboxを選ぶ地図案件とGoogle Maps・MapLibreへ回す案件の境目

Mapboxが向くのは、地図の配色やラベルを自社ブランドや業務用途に合わせて作り込みたく、月間の地図表示が数万〜数十万回に収まるWebアプリです。GL JSは月5万ロードまで無料で、同じ表示回数ならGoogle Maps PlatformのDynamic Mapsより請求額が小さくなります。

逆に、店舗検索やクチコミなどGoogleの施設データそのものが価値になる案件はGoogle Maps、ライブラリの利用規約に縛られたくない・タイルを自前で配信できる体制がある案件はMapLibreを選びます。Mapboxを使うなら、SPAで地図を作り直さない実装と、公開トークンのURL制限の2点を最初に押さえてください。

Mapboxの正体：地図データ・ベクタタイル・スタイルを束ねる位置情報基盤

Mapboxは2010年に米国で創業した企業と、その提供サービスの名前です。日本では2020年3月にソフトバンクとの合弁会社が設立されたことがソフトバンクの2020年5月20日付プレスリリースで公表されています。

GL JS・モバイルSDK・各種APIが受け持つ役割と課金単位の違い

Mapboxの製品は、地図を描く「SDK」と、データを返す「API」に分かれます。どれを使うかで課金単位が変わるため、最初に整理しておくと見積もりで迷いません。

業務システムでまず使うのはGL JSです。住所から拠点を打つ機能を足すとGeocoding API、配送ルートを出すとDirections APIの課金が加わります。

ベクタタイルとStyle Specificationで地図の見た目を書き換える仕組み

Mapboxの地図は、画像ではなく道路や建物の形状データを小さな区画に分けた「ベクタタイル」をブラウザで描画しています。形式はMapbox Vector Tile仕様として公開されており、最新は2016年1月の2.1で、データの符号化方式はProtocol Buffersです。仕様自体は無償で使えるため、MapLibreやGeoServerなど他の製品でも同じ形式が流通しています。

色・線の太さ・ラベルの表示条件は、Mapbox Style Specificationに沿ったJSONで定義します。画像タイルと違い、配色の変更にタイルの再生成は要りません。たとえば「配送対象エリアの道路だけ太くする」「競合店の建物を薄く塗る」といった業務都合の表現を、スタイルの書き換えだけで実現できます。

Mapbox GL JS v3.33で業務データを地図に重ねる最小構成の手順

ここからは、拠点一覧を地図に打ち、クリックで名称を出すところまでを順に書きます。GL JSの公式ガイドが示すCDN版を使うので、ビルド環境が無くても動かせます。

アクセストークンの発行とURL制限で公開トークンの流用を防ぐ設定

GL JSはアカウントに紐づくアクセストークンが無いと地図を表示しません。トークン管理の公式ガイドによると、種類は公開用のpk、サーバー専用のsk、最長1時間で失効する一時用のtkの3つです。

ブラウザに埋め込むpkトークンは、ページのソースを見れば誰でも読めます。そのため、トークンごとに最大100件まで設定できるURL制限で、自社ドメイン以外からの利用を403で拒否させます。URL制限はGL JS 0.53.1以上とRefererヘッダ付きのリクエストで効き、モバイルSDKからのリクエストには効きません。本番用と開発用（localhost許可）でトークンを分けるのが公式の推奨です。

CDN読み込みからStandardスタイル表示までのHTMLとJavaScript

最小構成は、CSSとJSを1本ずつ読み、mapboxgl.Mapを1回生成するだけです。styleを省くと既定のStandardスタイルが使われます。

<link href="https://api.mapbox.com/mapbox-gl-js/v3.33.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.33.0/mapbox-gl.js"></script>
<div id="map" style="height: 480px;"></div>
<script>
  const map = new mapboxgl.Map({
    accessToken: 'pk.ここに公開トークン',
    container: 'map',
    style: 'mapbox://styles/mapbox/standard',
    center: [139.767, 35.681], // [経度, 緯度] の順（東京駅付近）
    zoom: 12,
    language: 'ja',
    cooperativeGestures: true // ページスクロール中の誤ズームを防ぐ
  });
</script>

座標は[経度, 緯度]の順です。Google Mapsの{lat, lng}と逆なので、移行時に座標の順序を取り違えやすい箇所です。languageはMap APIリファレンスでBCP 47の言語タグを受け取ると定義されており、Mapboxのベクタタイルを使う場合に限ってラベルの言語を切り替えます。cooperativeGesturesを有効にすると、Ctrlキーか⌘キーを押しながらでないとホイールズームしなくなり、縦に長い業務画面に地図を埋め込んだときの操作事故を減らせます。

GeoJSONの拠点データをcircleレイヤーで重ね、クリックで名称を出すコード

業務データはGeoJSONに変換してaddSourceで渡し、addLayerで描き方を指定します。

map.on('load', () => {
  map.addSource('branches', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        { type: 'Feature', properties: { name: '本社' },
          geometry: { type: 'Point', coordinates: [139.767, 35.681] } },
        { type: 'Feature', properties: { name: '品川倉庫' },
          geometry: { type: 'Point', coordinates: [139.740, 35.628] } }
      ]
    }
  });
  map.addLayer({
    id: 'branches-circle',
    type: 'circle',
    source: 'branches',
    slot: 'top', // Standardスタイルの最前面に置く
    paint: { 'circle-radius': 8, 'circle-color': '#d9480f' }
  });
  map.on('click', 'branches-circle', (e) => {
    new mapboxgl.Popup()
      .setLngLat(e.features[0].geometry.coordinates)
      .setText(e.features[0].properties.name)
      .addTo(map);
  });
});

slotはStandardスタイル固有の指定で、Standardスタイルのガイドではtop・middle・bottomの3段から独自レイヤーの差し込み位置を選ぶと説明されています。同じガイドには、map.setConfigProperty('basemap', 'lightPreset', 'night')のようにdawn・day・dusk・nightの4種で明るさを切り替える設定も紹介されている点が特徴です。拠点が数千件を超える場合は、データをAPIからURLで読ませ、クラスタ表示に切り替えると描画が軽くなります。

Mapboxの料金体系：map loadの数え方と無料枠を超えたときの請求額

料金は公式の料金ページに製品ごとの無料枠と段階単価で載っています。以下は2026年10月21日時点の表示に基づく金額で、単位は米ドルです。

GL JSは初期化1回で1ロード、月5万回までの無料枠と段階単価

料金ページは、map loadを「GL JSがWebページまたはWebアプリで初期化されるたびに1回」と定義しています。1回のロードの中で発生するベクタタイル・ラスタタイルの取得は回数無制限で含まれるため、ユーザーが地図を拡大縮小・移動しても追加の課金はありません。

月20万ロードなら、5万〜10万の区間で250ドル、10万〜20万の区間で400ドル、合計650ドルです。500万ロードを超える分は営業への問い合わせになります。ネイティブアプリのMaps SDKは別枠で、月間アクティブユーザー2万5,000人まで無料です。

ジオコーディングの一時利用と永続保存で課金単価が変わる落とし穴

Geocoding APIは、結果の扱い方で料金区分が分かれます。画面に表示して捨てる一時利用は月10万リクエストまで無料で、超えると1,000件あたり0.75ドルからです。結果をデータベースに保存したりバッチ処理したりする永続利用は無料枠が無く、1,000件あたり5.00ドルから課金されます。

顧客マスタの住所を一括で緯度経度に変換して保存する処理は、永続利用の区分に当たります。1万件の顧客住所を変換すると約50ドルで、一時利用の無料枠に収まると見込んで見積もると外れます。住所データの整備自体はGISデータの形式・座標系・取り込み設計の論点と重なるので、変換結果の座標系もあわせて確認してください。

SPAの画面遷移で地図を作り直すとロード数が膨らむ原因と対処

課金が初期化の回数で決まるので、ReactやVueのSPAで画面を切り替えるたびに地図コンポーネントが破棄・再生成される作りにすると、同じ利用者が1回の訪問で何ロードも消費します。一覧画面と詳細画面を往復するだけの業務画面で、想定の数倍の請求になる典型パターンです。

対策は、Mapインスタンスをレイアウト側に1つだけ保持し、画面遷移ではsetCenterやレイヤーの表示切替で中身だけ入れ替えることです。不要になった地図はmap.remove()で破棄し、メモリを解放します。地図を常時表示する必要が無い画面は、Static Images APIの静止画（月5万リクエスト無料）で代用するとロードを消費しません。

Mapbox GL JSのライセンス変更とMapLibreフォークの位置づけ

Mapboxを選ぶか迷う理由の多くは、2020年12月のライセンス変更にあります。料金より先に、どの版が何の条件で使えるのかを確認しておくべきです。

v2以降はMapbox製品との併用限定、v1.13以前はBSD-3-Clauseの条件

GL JSのLICENSE.txtは、v2以降を「関連するMapbox製品とのみ併用する」条件でMapboxの利用規約の下に許諾しています。有効なMapboxアカウントが前提で、課金や利用データ送信に関わる部分の改変は認められていません。npm registryでもmapbox-glのライセンス欄は「SEE LICENSE IN LICENSE.txt」と表示されます。

一方、v1.13以前は従来どおりBSD-3-Clauseです。ただし1系は2020年で開発が止まっているため、新規案件で1系を固定して使う判断は勧めません。他社のタイルを表示したいなら、次に述べるMapLibreを選ぶほうが筋が通ります。ラスタタイル中心でよければ、OSSで軽量なLeafletとは？v1.9.4の使い方と地理院タイル表示、2.0移行とMapLibreとの選び分けも候補に入ります。

MapLibre GL JSでライブラリ費用を消したときに残るタイル配信の負担

MapLibre GL JSは、ライセンス変更前のMapbox GL JS 1系から分岐したオープンソース版で、BSD-3-Clauseで配布されています。2026年10月21日時点のnpm最新版は6.15.0です。ライブラリにmap load課金はありません。

その代わり、背景地図のタイルを自前で配信するか、MapTilerなどのタイル提供サービスと別途契約する必要があります。自前配信ではタイル生成・ストレージ・CDNの費用と、地図データ更新の運用を担う必要がある点も負担です。タイル配信を含むWebGISの構成はWeb GISのタイル配信とライブラリ選定で詳しく比べています。

Google Maps Platform・MapLibre・Mapboxの業務向け選定基準

3つの選択肢は、費用の安さだけでなく、使えるデータと運用負担が違います。表示回数で試算したうえで、要件に照らして決めます。

月間表示回数1万・5万・20万で比べる3方式の地図表示費用の目安

Google Maps Platformの料金表では、Web地図表示に当たるDynamic Mapsは月1万回が無料で、超過分は1,000回あたり7.00ドル、10万回超の区間は5.60ドルです。Mapboxの段階単価と同じ月間回数で並べると次のとおりです。

Googleの金額は、無料の1万回を除いた分に各区間の単価を当てはめた試算です。住所検索や経路計算を使えば両社とも別料金が加わり、為替と契約形態でも変わります。国内地図の精度を重視する場合はZENRIN Maps APIの料金と無料枠、AWS上で完結させたい場合はAmazon Location Serviceの機能と料金も比較対象に入ります。

Mapboxを採用する条件と、採用を見送ってよい業務システムの場面

採用するのは、次の条件がそろう案件です。地図の見た目を業務用途に合わせて作り込みたい、月間ロードが数万〜数十万回に収まる、地図の背景データと描画ライブラリの保守を外部に任せたい。配送エリアの可視化、営業担当の訪問先マップ、設備点検の現場地図などが当てはまります。

見送る場面ははっきりしています。店舗名・営業時間・クチコミといったGoogleの施設情報を画面に出したい案件では、Mapboxに置き換える利点がありません。月数百万ロード規模で利用規約上の制約や請求の上振れを避けたい案件、閉域網で外部APIに出られない案件は、MapLibreと自前タイル配信を選びます。社内の数人しか見ない管理画面なら、どれを選んでも無料枠に収まるため、既存の開発チームが慣れたものを使えば十分です。

地図を組み込んだ業務アプリの要件整理から実装・運用までを外部に任せたい場合は、業務用・Webアプリ開発のサービスページで対応範囲を確認できます。

よくある質問

Mapboxの導入を検討する段階で、よく寄せられる疑問に答えます。

Mapboxは無料で使えますか？

製品ごとに月間の無料枠があり、その範囲内なら請求は発生しません。Web地図のGL JSは月5万map load、ネイティブアプリのMaps SDKは月間アクティブユーザー2万5,000人、一時利用のGeocoding APIは月10万リクエストまで無料です。ただし利用にはアカウント登録とトークン発行が必要で、無料枠を超えると自動的に従量課金へ移ります。想定外の請求を避けるため、アカウントの利用状況画面で月ごとの消費量を確認する運用を最初から組み込んでください。

MapboxとGoogleマップの違いは何ですか？

大きな違いは、地図の見た目を作り込める自由度と、施設データの量です。Mapboxはスタイル定義のJSONで道路や建物の色・ラベルまで変えられ、同じ表示回数ならWeb地図の料金も安く収まります。Googleマップは店舗や施設の名称・営業時間・クチコミといったデータが厚く、利用者が見慣れている点が強みです。施設情報を見せたいならGoogle、業務データを見やすく重ねたいならMapboxが向きます。

MapboxとMapLibreはどちらを選ぶべきですか？

背景地図のタイルを誰が用意するかで決まります。Mapboxはタイル配信まで含めて従量課金で任せられる一方、GL JS v2以降はMapbox製品との併用に限られます。MapLibreはBSD-3-Clauseで自由に使えますが、タイルは自前配信か別サービスとの契約が必要です。インフラ運用の体制が無いならMapbox、月数百万ロード規模や閉域網の要件があるならMapLibreを選んでください。

Mapboxは日本語の地図表示に対応していますか？

日本語の地図表示にも対応した仕様です。GL JSではMap生成時のlanguageオプションにjaを指定すると、Mapboxのベクタタイルに日本語名がある地物は日本語ラベルで表示されます。ただし地物ごとのデータの有無に依存するため、郊外の細い道路や新しい施設は名称が出ないこともあります。番地レベルの精度や国内の建物名が要件に入る場合は、対象エリアで表示を確かめてから採用を決めてください。

React・Vueのアプリに組み込むときの注意点は？

コンポーネントの再描画ごとに地図を作り直さないことが最優先です。map loadは初期化の回数で課金されるため、画面遷移のたびにnew mapboxgl.Map()が走る構造だと請求が膨らみます。地図インスタンスはレイアウト側で1つだけ保持し、データの差し替えはaddSource済みのソースを更新する形で行う実装です。npmで導入する場合のパッケージ名はmapbox-glで、CDN版と同じ3.33系を指定できます。

関連記事

• GISとは？地理情報システムの仕組み・種類と業務システムへの組み込み判断：地図を業務システムに組み込むかどうかを決める前提知識です
• Web GISとは？タイル配信とベクタタイル・ライブラリ選定を実装目線で解説：MapboxやMapLibreを含むWeb地図の全体構成を整理しています
• GISデータとは？形式・座標系・取り込み設計を実装目線で解説：地図に重ねるGeoJSONや座標系の扱いを補えます
• GISソフトの比較｜無償・商用・クラウドの選定軸と受託開発への切替点：地図APIではなくGISパッケージで足りるかを判断できます
• Amazon Location Serviceとは？料金・APIキーの使い方・日本での制約とGoogle Mapsとの違い：AWS上で地図機能を完結させる場合の比較対象です