[初回公開] 2020年10月09日
ウェブサイトで店舗やアクセスといった位置を示す情報はインターネット上で利用できる地図サービスで公開することができるが、その中で Google Map は利用規約が変わりクレジットカードが必須となり、Yahoo!地図はサービスが終了してしまったが代わりに無償で利用できる Mapbox の利用が増えつつあり、Mapbox を始める方法について紹介する。
このページの目次
１．無償の地図サービス Mapbox とは
無償の地図サービス Mapbox とは、非営利の顧客にインターネットで表示する地図をカスタマイズ提供することを目的にした地図サービスである。
Mapbox 社が運営管理しており、Google Map しか選択肢が無かったこの業界に各社が Mapbox 社に出資している状況である。
下図のように Mapbox は JavaScript を利用してインターネット上に地図を表示することができる。
地図サービスの利用に際しては、無償でも表示回数に制限があり、JavaScript 版であれば 50,000 読込/月まで無償で、50,001 ロードから 100,000 ロードであれば 1,000 件増えるごとに 550 円加算される。
利用開始時は Google Map のようにクレジットカードや銀行口座の登録は不要となっており、表示回数の制限値に達すると翌月まで自動的に利用できなくなる仕組みになっている。
２．Google Map と Yahoo!地図の今後の展開
Google Map と Yahoo!地図の今後としては、Google Map を採用しているウェブサイトの減少、及び Yahoo!地図に関してはサービスが終了しているので、もし地図サービスの入れ替えを行っていなければ表示できない状態にある。
一時期は Google Map を採用していた企業やウェブアプリケーションが多かったが、2018年06月以降は新規利用者も既存の利用者もクレジットカードを登録したアカウントが必要になり、既に公開していた Google Map はエラーが表示されて正常に利用できなくなった。
利用を継続するためには無償版でもクレジットカードの登録が必要になり、適切に設定を行えば自動的に課金されることはないのだが、知らないところで自動で請求されるリスクを懸念して Google Map の採用を取りやめたウェブサイトは多い。
また、Yahoo!地図は2020年10月31日(土)を持ってサービスが終了するため、Yahoo!地図利用者は代替えの地図サービスを検討しなければならないが、Yahoo!地図の運営から公式に Mapbox への移行がアナウンスされている。
３．Mapbox を取り巻く環境について
Mapbox を取り巻く環境は、これから導入するウェブサイトは増えると思われる。
Mapbox のサービスが提供されたのは 2010 年とサービスとしてはまだ新しい方で知名度もあまり無いが、使い方は Google Map API に似ているので新たに Mapbox の利用を学習する労力は少なくてすむ。
そのため、Google Map から乗り換えの工数が大きくならない利点がある。
肝心の日本国内の地図においては Google Map に日本国内の地図情報を提供しているゼンリン社が Mapbox とも提携したこともあり、Google Map 同様の地図の精度と見た目、そして更新の早さが期待される。
しかしそんな Mapbox もデメリットがあり、Google Map と比較すると地図が表示されるまでやや時間がかかるのと、かなり縮尺を拡大しないと建物や路線が見えない点など Google Map に慣れていると使い勝手で気になる点がある。
とはいえ、デメリットを踏まえてもクレジットカードの登録無しですぐに利用できる Mapbox は今後普及する可能性を秘めている。
４．Mapbox を始める方法
Mapbox を利用するには地図を埋め込む HTML やアプリ内に専用のアクセストークンが必要になり、アクセストークンを入手するためには Mapbox 公式サイトで会員登録する必要がある。
会員登録にはログイン内で利用するユーザネームの他、ログインに必要なメールアドレスとパスワードが必要となり、下図の画面で入力を行う。
氏名と会社名を入力する欄もあるが任意入力のため個人利用、及び有償での利用を想定しないのであれば未入力でも構わない。
ログイン情報等の入力が済むと次の画面で登録したメールアドレス宛てに本人認証用の URL が送付されるのでメール本文をクリックまたはブラウザに URL をコピーしてアクセスする。
登録したメールアドレスに Mapbox からメールが届いていなければメーラーの迷惑メールボックスに入っていないかや、上図の Check your email の画面に記載されているメールアドレスに間違いが無いか確認し、もし間違いがあれば再度、登録をやり直す。
次に、本人確認のメールアドレスが届き、メール本文内の URL をクリックすれば本人確認が終了し、Mapbox のトップ画面よりログインすることができる。
ログインを行うと下図のような自身のアカウントページが表示され、この画面でアクセストークの取得やアカウントの設定変更、Mapbox のドキュメントにアクセスすることができる。
Mapbox の表示に必要なアクセストークンはログイン直後のこの画面の左下にある Default public token の箇所に英数字が記載されているのでこの文字列をコピーして別途テキストファイルなどにメモしておく。
掲載されているアクセストークンの右上にあるコピーマークをクリックするだけでアクセストークンが自動的にコピーされるので画面内をドラッグしなくても簡単にコピーすることができる。
５．Mapbox の JavaScript 版のサンプルコード
Mapbox の JavaScript 版のサンプルコードは、公式サイトのドキュメントに次のコードが紹介されている。
初期の中心位置はアメリカを指しており拡大縮小等のツールの表示も無い、ごく簡単な地図を表示するものとなっている。
<!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>
上記内の mapboxgl.accessToken = ‘アクセストークン’ に前述のログインして取得したトークンキーに差し替えることで、ブラウザ上で地図が正常に表示されるようになる。
関連記事
Google Map API のキーを取得して地図サービスの利用を始める方法
Google Map を利用を始めるためには Google アカウントがあれば無料で誰でも利用できていたが、2018 年の Google Maps Platform へ移行してからは Google アカウントにクレジットカードの紐づけが必要…
ウェブサイトをインターネット上で公開するためにはウェブサーバと呼ばれるソフトウェアが必要になるが、1 つのサーバで複数のサイトを運営していたり、特定のディレクトリのみアクセス制限をかけた…
メールヘッダの Return-Path と Reply-To の違いと確認方法
インターネットで利用されるメールは件名や送信に利用したサーバなどの情報をメールヘッダと呼ばれるメールのプロパティ情報欄に保持されており、差出人情報となる Return-Path と Reply-To の違い…
