Google Maps API が有料に… 代用はLeaflet.jsで決まり!

これまでWebにマップを表示したいとき、ほぼ100%Google Maps APIが使われてきたと思います(そんなことない)。

しかし、2018/7/16より、Google Maps APIの有料化が始まりました。

というのも、Google Maps APIというサービスが生まれ変わり、Google Cloud Platformに統一されました。

https://cloud.google.com/maps-platform/pricing/?hl=ja

今回はGoogle Cloud Platformについては割愛させていただきますが、月$200までは無料枠として利用できますが、マップをカスタマイズすればするほど有料につかづいていくイメージです。

 

そこで、Google Maps API の代わりになりそうな、オープンソースのマップクライアントライブラリである「Leaflet.js」を使ってみようと思います。

https://leafletjs.com/

プラグインも多く開発されていて、カスタマイズ性は非常に高そうです。

 

クイックスタート

https://leafletjs.com/examples/quick-start/

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>");

これでアイコンが変更されました。

アイコンが複数ある場合は、アイコンの設定を複数用意しておいて、マーカーごとに適宜設定して行く形になります。

 

まとめ

最後に、今回のコードをまとめておきました。

See the Pen Leaflet.js by iku (@ikumanj) on CodePen.0


今回紹介した以外にも、色々な用途で利用できると思います。

GoogleMapのレイヤーを使用するには結局APIキーが必要、という情報があったのですが、

キーなしでも動いていますね。

 

以上、Google Maps APIが有料になったので、代わりにLeaflet.jsを使ってみた!でした!

北海道の駆け出しフロントエンドエンジニア。 webに関する仕事をしています。 生まれた時からゲームが大好き。
Posts created 38

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top