マップ比較（Google Map・OpenStreetMap・MapBox）

この記事は公開日より3年以上経過しているため、現在の内容と異なる可能性があります。

a-blog cms では OpenStreetMap と Google Map が標準で実装されています。それぞれのサービスの特徴について調べましたのでサイト制作時のお役に立てればと思います。（2020/02時点）

簡単な比較表

最近話題に上がっている MapBox も合わせて比較してみました。

※ Google Map の料金計算は月間10万ロード以下の場合で Maps JavaScript API を使用していると仮定した値段です。使用するAPIや条件で料金は変わってきます。
Maps JavaScript API Usage and Billing | Google Developers

※ MapBox の料金計算は Maps Loads for Web を使用していると仮定した値段です。使用する機能や条件で料金は変わってきます。
Mapbox 料金

地図の表示比較

3つの地図を並べてみました。Google Map と MapBox は特殊なオプションをつけていないものになります。

OpenStreetMap

メリット

• 無料

デメリット

• 認知度が低い
• お店情報が少ない

a-blog cms では標準が OpenStreetMap であるため見たことがある人も多いと思います。
OpenStreetMap は、オープンソースで作られている地図サービスになります。誰でも自由に参加して、誰でも自由に地図を編集して、誰でも自由に地図を利用することが出来ます。そのためメンテナンスが盛んな場所もあれば古いままの場所も出てきてしまいます。名古屋周辺で確認したところ古い情報のままのお店などを確認することができました。

Google Map

メリット

• 認知度が高い
• お店情報が豊富
• ストリートビューを見れる

デメリット

• クレジットカード登録が必須
• 値段がやや高い

Google Map は認知度が高く、日本でも広く使われています。また、お店情報も豊富です。
他の地図には無い機能として「ストリートビュー」も強みだと思います。 a-blog cms では Google Map ユニットに標準でストリートビュー切り替え機能を搭載していますので簡単に導入することが可能です。 しかし、クレジットカード登録をしないと使用できないため、サイト制作時に試しに Google Map を載せたいという時も一手間かかります。 MapBox と比べると値段がやや高いため、Webサイトにあまりコストをかけたく無い場合は他の地図を検討する必要があります。

MapBox

メリット

• 公式ページのMap導入方法解説ページが優しい
• 地図スタイルのカスタマイズが細かくできる

デメリット

• a-blog cms標準機能でない
• 認知度が（まだ）低い
• お店情報が（まだ）少ない

a-blog cms ではまだ標準機能としての搭載には至っておりません。静的なテンプレートに地図を貼り付けるだけであれば数十行のカスタマイズで可能ですが、カスタムフィールドやユニットに組み込むにはさらにひと手間かかります。 また、MapBox が日本向けにサービス提供したのが2019年のためまだ認知度が低く、 Google Map ほどお店情報も豊富ではありません。しかし、 Mapbox の地図データはユーザの携帯電話から送信されるGPS情報を元に作成されるようなので今後使用ユーザーが増えるほど地図の精度もあがってくのではないでしょうか。

a-blog cms の標準機能ではないですが、ただ地図を載せるだけであれば簡単に導入できます。上記 MapBox 地図のソースコードは20行もありません。

<div class="column-map-centter js_notStyle acms-col-sm-12">
  <div id='map' style='width: 775px; height: 516px;'></div>
</div>
<script>
  mapboxgl.accessToken = 'アクセストークンキー';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [136.88741, 35.17291],
    zoom: 16
  });
  var marker = new mapboxgl.Marker()
  .setLngLat([136.88741, 35.17291])
  .addTo(map);
</script>

導入方法については公式サイトで優しく案内してくれるので気になる方は MapBox のアカウントを作成してみてください。

MapBox Japan
https://www.mapbox.jp/

マップスタイルのカスタマイズはブラウザ上で行えます。画面上で確認をしながらフォントの設定やマップの配色などの細かい調整が可能です。