これまでWebにマップを表示したいとき、ほぼ100%Google Maps APIが使われてきたと思います（そんなことない）。
しかし、2018/7/16より、Google Maps APIの有料化が始まりました。
というのも、Google Maps APIというサービスが生まれ変わり、Google Cloud Platformに統一されました。
今回はGoogle Cloud Platformについては割愛させていただきますが、月$200までは無料枠として利用できますが、マップをカスタマイズすればするほど有料につかづいていくイメージです。
そこで、Google Maps API の代わりになりそうな、オープンソースのマップクライアントライブラリである「Leaflet.js」を使ってみようと思います。
プラグインも多く開発されていて、カスタマイズ性は非常に高そうです。
クイックスタート
Leaflet.jsはCDNが用意されているので、今回はこちらを使用していきます。
・まずはheadタグ内にCSSを読み込み
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>・次に先ほどのコードより後でJSの読み込み
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
その後、実際にマップが表示されるように表示される領域を用意します。
<style>
#map {
height: 300px;
}
</style>
<div id="map"></div>そして実際にmapの表示をするために、jsで記述します。
<script>
var map = L.map('map').setView([43.3807686 , 142.5069617], 6);<br>
// L.map('表示する箇所のid').setView([経度,経度], ズームレベル);
</script>
下の画像のような何も出ていないグレー背景の、Leafletマップが表示されたかと思います。
これで準備はできました。
次はこのマップにタイルレイヤーを追加します。
GoogleMapタイルレイヤーの追加
タイルレイヤーには、OpenStreetMapや、地理院地図などがありますが、今回はGoogleMapの代用としての利用ですので、GoogleMapのタイルレイヤーを表示してみます。
公式のプラグインからできるっしょ！と思い、探してみるもなかなか見つからず、、、
Google Map のAPIドキュメントをみてみるも見つけられず、、、
stack overflow で似たような質問があり、そこの回答から見つけることができました。
URLの変更で4種類のタイルレイヤーを表示できます。
地図
<script>
var map = L.map('map').setView([43.3807686 , 142.5069617], 6);
L.tileLayer(
'https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}
).addTo(map);
</script>
航空写真
<script>
var map = L.map('map').setView([43.3807686 , 142.5069617], 6);
L.tileLayer(
'https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}
).addTo(map);
</script>
航空写真（文字なし）
<script>
var map = L.map('map').setView([43.3807686 , 142.5069617], 6);
L.tileLayer(
'https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}
).addTo(map);
</script>
地形
<script>
var map = L.map('map').setView([43.3807686 , 142.5069617], 6);
L.tileLayer(
'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}
).addTo(map);
</script>
これらで、画像のようなタイルレイヤーの呼び出しができました。
やっとのこさ、Leaflet.jsを用いてGoogleMapの見た目で表示することができました。
が、今回やりたいことは、GoogleMaps API のように、ピンのカスタマイズ、ピンに対する情報ウィンドウの表示、ルートの表示、などなどです。
引き続きいってみましょう。
ウィンドウがでるマーカーの設置
マップのカスタマイズといえば、マーカーの設置ですよね。
地図上の飲食店なんかにマーカーを置き、クリックで情報ウィンドウがでる。このような、あるあるな機能をつけていきましょう。
マーカーの設置
・L.markerでマーカーを追加
<script>
var map = L.map('map').setView([43.3807686 , 142.5069617], 6);
L.tileLayer(
'https://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',
{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}
).addTo(map);
// マーカーの追加
var marker = L.marker([43.3807686, 142.5069617]).addTo(map);
</script>13行目でマーカーを追加しています。
L.marker([経度, 緯度]).addTo(追加するマップ);
でマーカーを追加することができます。
マーカーにウィンドウを設定
・bindPopupでマーカーにウィンドウを設定
// マーカーの追加
var marker = L.marker([43.3807686, 142.5069617]).addTo(map);
marker.bindPopup("<p>北海道やねん</p>");余計なコードは省略しました。
bindPopupで先ほど設定したマーカーである marker にポップアップを設定します。
“”の中にHTMLを記述することで、そのまま表示されます。
また、.openPopup()を使うことで、初期状態で開くように設定もできます。
// マーカーの追加
var marker = L.marker([43.3807686, 142.5069617]).addTo(map);
marker.bindPopup("<p>北海道やねん</p>").openPopup();
マーカーの複数設置
実際にマップを活用して行く場合は、マーカーが複数立つ場合が多いと思います。
そんな時は単純にマーカーを増やしていってもOKです。
//複数のマーカーを置く
var marker01 = L.marker([43.3807686, 142.5069617]).addTo(map);
marker01.bindPopup("<p>北海道やねん</p>");
var marker02 = L.marker([43.1007686, 141.3569617]).addTo(map);
marker02.bindPopup("<p>ここに札幌</p>");
var marker03 = L.marker([42.1007686, 145.3569617]).addTo(map);
marker03.bindPopup("<p>海！！！！</p>").openPopup();
ピンの画像を変更
さらに良くあるカスタマイズといえば、ピンのアイコンをデフォルトから変更することですね。
Leaflet.jsでは、もちろんカスタマイズ可能です。
// アイコンの設定
var Icon = L.icon({
iconUrl: 'URL', // アイコン画像のURL
iconSize: [25, 40], // アイコンの大きさ
iconAnchor: [16, 40], // 画像内でマーカーの位置を指し示す点の位置
popupAnchor: [0, -32] // ポップアップが出現する位置（iconAnchorからの相対位置）
});
var marker01 = L.marker([43.3807686, 142.5069617],).addTo(map);
marker01.bindPopup("<p>北海道やねん</p>");
var marker02 = L.marker([43.1007686, 141.3569617]).addTo(map);
marker02.bindPopup("<p>ここに札幌</p>");
// marker3にアイコンを設定
var marker03 = L.marker([42.1007686, 145.3569617],{icon: Icon}).addTo(map);
marker03.bindPopup("<p>海！！！！</p>");これでアイコンが変更されました。
アイコンが複数ある場合は、アイコンの設定を複数用意しておいて、マーカーごとに適宜設定して行く形になります。
まとめ
最後に、今回のコードをまとめておきました。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VqJZyq” default_tab=”result” user=”ikumanj”]See the Pen Leaflet.js by iku (@ikumanj) on CodePen.[/codepen_embed]
今回紹介した以外にも、色々な用途で利用できると思います。
GoogleMapのレイヤーを使用するには結局APIキーが必要、という情報があったのですが、
キーなしでも動いていますね。
以上、Google Maps APIが有料になったので、代わりにLeaflet.jsを使ってみた！でした！
コメント