必ず役立つWeb用地図系ライブラリまとめ
最近は業務システムの開発においてもスマートフォンやタブレットを対象とすることがあります。そうした端末は屋外で使うことも想定されていますので、その際には地図を使うこともあるでしょう。
Google MapsやBing Mapをそのまま利用する方も多いと思いますが、今回はそれらを利用するための地図用ライブラリをまとめてみました。そのまま利用するよりも簡単に実装できるものもありますので、デザイナーやJavaScriptが苦手な方にも利用していただけるでしょう。
今回紹介する各ライブラリのライセンスにおいては、MITやBSDなどオープン系のライセンスもありますが、ライブラリで利用するGoogleMAPやBingMAPの利用については、Google,Bingのライセンスに準拠する事になりますので、特に商用利用や利用頻度によって、利用料金が発生することに注意して下さい。
jQueryでGoogle Mapsをコントロール Maplace.js
Maplace.jsは、Google Maps用のjQueryプラグインです。jQueryに慣れていれば特に（慣れていなくとも）、こちらの方が手軽に実装できるではないでしょうか。以下は、サンプルのコードです。このように、利用においては簡単に設置が可能です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // JavaScript部分 | |
| <script> | |
| new Maplace({ | |
| locations: LocsA, | |
| map_div: '#gmap-dropdown', | |
| controls_title: 'Choose a location:' | |
| }).Load(); | |
| </script> | |
| <!– HTML部分 –> | |
| <div id="gmap-dropdown"></div> |
実行結果
その他、ポリラインや、距離測定、ルートマップ、ヒートマップなどの表示も可能です。今までGoogle MapのAPIを利用していた方も一度チェックしてみて下さい。
Maplace.js – A Google Maps javascript plugin for jQuery.
Google Mapsをもっと手軽に扱う gmaps.js
こちらも、Google Maps用のライブラリです。Maplaceのように、特に他のライブラリには依存しません。以下は、ベーシックな表示方法です。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type="text/css"> | |
| #map { | |
| width: 400px; | |
| height: 400px; | |
| } | |
| </style> | |
| <div id="map"></div> | |
| <a href="http://maps.google.com/maps/api/js?sensor=true"> | |
| http://maps.google.com/maps/api/js?sensor=true | |
| </a> | |
| <a href="http://gmaps.js">http://gmaps.js</a> | |
| <script> | |
| var map = new GMaps({ | |
| el: '#map', | |
| lat: -12.043333, | |
| lng: -77.028333 | |
| }); | |
| </script> |
上記コードの実行結果です。
その他、ルート表示、ジオフェンス表示、ストリートビューなども設定できます。単純に地図だけを表示したい場合に限らず、利用範囲の広いマップ表示プラグインです。
gmaps.js — Google Maps API with less pain and more fun
軽量マップライブラリ Leaflet
LeafletはOpen Street Mapを利用した、軽量な地図ライブラリです。サイズは130KB未満と非常に小さいのですが、その分他のライブラリと比べ機能は制限されます。それだけでも実用は十分とは思いますが、足りない機能はプラグインで補うことも可能になっています。これにより、サイト自体のサイズを最小限に押さえることができるでしょう。プラグインも豊富で、殆どの機能はそろっているようです。
Leaflet – a JavaScript library for interactive maps
地図デザインをカスタマイズできる Mapbox
Mapboxは自分でマップカラーやマーカーなどのデザインをカスタマイズして、それをサイトで利用できるサービスです。オリジナルなマップが欲しい場合は、とても良い選択となるでしょう。利用にはサインアップが必要で、その中でカスタマイズをしていきます。マップの表示は、JavaScriptのライブラリが豊富に揃っていますので、特に困ることはなさそうです。また、iOSとAndroidのSDKもあるので、モバイル開発でも利用できます。
地図データはOpen Street Map の一択ですが、アカウントには無料の利用枠がありますので確認してはいかがでしょうか。
Mapbox | Design and publish beautiful maps
機能も豊富でハイパフォーマンスなマップライブラリ OpenLayers 3
非常にサンプルが豊富なライブラリです。マップライブラリとして必要な機能は殆どが揃っているのではないでしょうか。地図データはBing MAP、Open Street MAPなどが利用できます。
3DのMAPライブラリ Cesium
WebGLで描画する3D地球儀のマップライブラリです。Apache2.0ライセンスの下、オープンソースのJavaScriptライブラリとなっています。地図データはBing MAP、Open Street Mapが利用出来ます。
地球儀上に様々なデータが表示可能ですので、データを用意してヒートマップやグラフ表示として利用することもできます。オリジナルの3Dのモデルを表示させたり、カメラコントロールも可能ですので、インタラクティブな見せ方ができるでしょう。
Cesium – WebGL Virtual Globe and Map Engine
最後に
昨今のサイトでは地図を表示するのが当たり前のように利用されています。実際、Google Maps や Bing Map など公式のライブラリでも手軽に導入でいるようになっていますが、今回紹介したライブラリを利用することで、より手軽に、かつ他の便利な機能なども利用できるようになります。地図の利用を考えている方はぜひお試しください。
hifive開発者ブログ 
コメントは受け付けていません。