無償の Mapbox は GoogleMap と Yahoo!地図に代わる地図サービスになるだろう

ウェブサイトで店舗やアクセスといった位置を示す情報は Google Map など地図サービスを利用して情報公開することがあるが、Yahoo!地図はサービスが終了し、Google Map も利用規約が変わりクレジットカードが必須になったことで利用しづらくなったのをうけ従来の Google Map のような使い勝手で無償で利用できる Mapbox が今後利用が増えると想像される。

無償の Mapbox は GoogleMap と Yahoo!地図に代わる地図サービスになるだろう




1.無償の地図サービス Mapbox とは


Mapbox の東京周辺の地図の様子

Mapbox とは非営利の顧客に地図のカスタマイズを提供することを目的にした地図サービスで Mapbox 社が運営管理しており、Google Map しか選択肢が無かったこの業界に各社が Mapbox 社出資している。
無償とは書いているものの、利用には制限があり、JavaScript 版であれば 50,000 読込/月まで無償で、50,001 ロードから 100,000 ロードであれば 1,000 件増えるごとに 550 円加算される。
利用開始時は Google Map のようにクレジットカードや銀行口座の登録は不要なので利用制限回数を迎えると翌月まで自動的に利用できなくなる仕組みになっている。



2.Google Map と Yahoo!地図の今後は


一時期は Google Map を採用していた企業やウェブアプリケーションの提供サービスが多かったが、2018年06月以降は新規利用者も既存の利用者もクレジットカードを登録したアカウントが必要になり、既存の公開していた Google Map はエラーが表示されて正常に利用できなくなった。
クレジットカードの登録が必須になったからといって登録と同時に利用が有償になったわけではなく無償の利用範囲と利用制限で課金されないように設定することは可能だが、知らないところで自動に請求されるリスクを懸念して Google Map の採用を取りやめたウェブサイトは多い。

また、Yahoo!地図は2020年10月31日(土)を持ってサービスが終了するため、Yahoo!地図利用者はこれから代替えの地図サービスを検討しなければならないが、Yahoo!地図の運営から公式に Mapbox への移行がアナウンスされている。

3.Mapbox を始めてみよう


Mapbox の公式サイト

Mapbox を利用するには地図を埋め込む HTML やアプリ内に専用のアクセストークンが必要になり、アクセストークンを入手するためには Mapbox 公式サイトに会員登録する必要がある。

会員登録に必要な情報を入力


会員登録にはログイン内で利用するユーザネームの他、ログインに必要なメールアドレスとパスワードが必要となる。
氏名と会社名を入力する欄もあるが任意入力のため個人利用、及び有償での利用を想定しないのであれば未入力でも構わない。

メールアドレスによる本人認証


ログイン情報等の入力が済むと次の画面で登録したメールアドレス宛てに本人認証用の URL が送付されるのでメール本文をクリックまたはブラウザに URL をコピーしてアクセスする。
登録したメールアドレスに Mapbox からメールが届いていなければメーラーの迷惑メールボックスに入っていないかや、上図の Check your email の画面に記載されているメールアドレスに間違いが無いか確認し、もし間違いがあれば再度、登録をやり直す。

Mapbox にログインする


本人確認のメールアドレスが届き、メール本文内の URL をクリックすれば本人確認が終了し、Mapbox のトップ画面よりログインすることができる。

Mapbox にログインした後のアカウント画面


無事にログインも済むと自身のアカウントページが表示され、この画面でアクセストークの取得やアカウントの設定変更、Mapbox のドキュメントにアクセスすることができる。
Mapbox の表示に必要なアクセストークンはログイン直後のこの画面の左下にある Default public token の箇所に英数字が記載されているのでこの文字列をコピーして別途テキストファイルなどにメモしておく。
掲載されているアクセストークンの右上にあるコピーマークをクリックするだけでアクセストークンが自動的にコピーされるので画面内をドラッグしなくても簡単にコピーすることができる。



4.Mapbox の JavaScript 版のサンプル


Mapbox の公式サイトに掲載されているサンプルは下記のコードで、初期の中心位置はアメリカを指しており拡大縮小等のツールの表示も無いごく簡単に地図を表示するものである。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute;
top: 0;
bottom: 0;
width: 100%;
padding: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'アクセストークン';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>


5.Mapbox を取り巻く環境


初期の Mapbox が提供されたのは 2010 年とサービスとしてはまだ新しい方で知名度もあまり無いが、使い方は Google Map API に似ているので新たに Mapbox の利用を学習する敷居は低く、Google Map からの乗り換えの工数も大きくならない利点がありこれから導入するウェブサイトは増えると思われる。
肝心の日本地図においては Google Map に日本国内の地図情報を提供しているゼンリン社が Mapbox と提携したこともあり、Google Map 同様の地図の精度と見た目、そして更新の早さが期待される。
しかしそんな Mapbox もデメリットがあり、Google Map と比較すると地図が表示されるまでやや時間がかかるのと、かなり縮尺を拡大しないと建物や路線が見えない点など Google Map に慣れていると使い勝手で気になる点がある。
デメリットを踏まえてもクレジットカードの登録無しですぐに利用できる Mapbox は今後普及する可能性を秘めている。

関連記事