Google Mapの代替手段

メモ。

GoogleMapがクレジットカード決済の導入必須となり、受託制作においてWebサイトへのマップの導入は格段に敷居が高くなってしまった。

社としてもこの危機を乗り越えるために代替手段を模索した結果。Leafletjs を利用したマップ表示を代替手段として採用することに。

Leafletjsとは

https://leafletjs.com/

leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。
軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。
ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね？」という方も、一度触ってみてください。

by http://shimz.me/blog/leaflet-js/4142

マップタイルを自由に切り替えることが可能。マップ生成のラッパーライブラリ。

導入方法

めっちゃ簡単だった。

1. リソースの読み込み

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>

2. JavaScriptで動作させる

A. 基本導入

// マップの生成
var map = L.map('map').setView(
    [30.3748331, 130.9574997],
    14 // ズーム
);
// OpenStreetMapを利用するためのタイル設定
L.tileLayer(
    'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
).addTo(map);

B. マーカー + ポップアップの作成

$_html = $('<div>hoge</div>')
L.marker(
    [30.3748331, 130.9574997],
    { title: "マーカーのタイトル" }
).addTo(map).bindPopup($_html.html())

C. マーカーにフィット

var markers = [
    L.marker(
        [30.3748331, 130.9574997],
        { title: "マーカーのタイトル" }
    ),
    L.marker(
        [30.3748331, 130.9574997],
        { title: "マーカーのタイトル" }
    ),
    L.marker(
        [30.3748331, 130.9574997],
        { title: "マーカーのタイトル" }
    ),
];
var group = new L.featureGroup(markers);
map.fitBounds(group.getBounds());

D. マーカーのアイコンを変更

var greenIcon = L.icon({
     iconUrl: 'leaf-green.png',
     shadowUrl: 'leaf-shadow.png',
     iconSize: [38, 95],
     shadowSize: [50, 64],
     iconAnchor:   [22, 94],
     shadowAnchor: [4, 62],
     popupAnchor:  [-3, -76]
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

結論

問題なくGoogleMapの代替にできそう。ルート表示などは無理。

現在地を動作するためには別途SSL等の導入は必須のため注意する。