無料で利用できていたGoogle Maps APIの料金が変わる？

Webページに地図を載せたいという要件があるとき、有力な解決策の一つにGoogle Maps APIがあります。
Googleマップの機能を一般の開発者にも提供するGoogle Maps APIは、地図表示の方法として定石となっており、同じく提供されている経路検索やジオコーディングといった地理情報を扱うサービスと共に多くのシステムに幅広く採用されてきました。

そんなGoogle Maps APIですが、この度ライセンス方式の再編による料金体系の変更が発表されています。
これまで自社のWebサイトでGoogle Maps APIを利用する際は、ある程度の規模までであれば無償プランの枠内で課金されることなく地図を掲載することができました。しかし2018年7月16日に予定されている移行後、無償利用枠は引き続き残されるものの大幅に縮小されることなります。

これまでは、1日2万5000リクエストまでが無償枠で、無償枠を超えた場合は、クレジットカードを登録し、超過分は0.5USドル／1000リクエストで使用が可能だった。これに対してGoogle Maps Platformの場合は、無償枠が、Maps JavaScript APIだと月間2万8000リクエスト（1日平均933リクエスト）となり、大幅に減少することになる。

引用元: 6月11日以降、Google Maps APIによる地図表示が薄暗くなる／エラーになるケースも――「Google Maps Platform」移行で何が変わる？（※移行日は7月16日に延期されています）

ページ内でGoogle Maps APIを利用した地図が1回表示されるごとに1リクエストとカウントされる模様ですので、移行後の無償利用枠である「1日平均933リクエスト」の上限を超えるケースは少なくないのでは、という印象を受けます。（ちなみに、新体系の料金では無償枠200ドルを超えた分の料金は、7ドル/1,000リクエストとなっています）

なお、公式ドキュメントによると、以下の利用分は課金の対象にならず、無料となります。（参考: Google Maps Platform – 価格に関する一般的な質問）

• Maps SDK for iOS・Androidを使用してモバイルアプリ内で地図表示する場合
• Google Maps APIを使用せずにGoogleマップの「地図を埋め込む」機能を利用してiframeタグで地図を貼り付ける場合

無料で使いたい場合は代替策を取ろう

Google Maps APIの料金体系が変わることが分かりました。
さて、今後引き続き地図表示を利用していくためにはどのような対応策が考えられるか、挙げてみましょう。

1つ目は、コンテンツはそのまま変更せず、API利用の支払い情報を設定し無償枠を超えた課金額を支払う運用を行うことです。
運営のための予算が確保されていれば、この方法を取ってコンテンツの修正なく従来通りの掲載を続けることができます。

2つ目は、Google Maps APIではなくGoogleマップの「地図を埋め込む」で貼り付けられる地図に置き換えることです。
例えばアクセス情報のコンテンツの中で、単一の店舗の所在地を示すといったシンプルな利用であれば、この方法で十分でしょう。経路の検索結果から埋め込めば、経路図を掲載することもできます。

3つ目は、Google Maps APIの代替となる製品を使用して作り直すことです。
位置情報を持ったデータを検索して、結果を動的に地図表示するといった複雑な処理を実装したい場合は、この方法を取ることになります。作り直しのための作業工数がかかりますが、要件に応じて色々と応用を利かせられるため、技術的な観点では有力な方法だと思います。

今回は、3つ目の「Google Maps APIの代替となる製品を使用して作り直す」ついて取り上げます。

インタラクティブな地図を実装できる「Leaflet」

Leafletは、インタラクティブな地図を実装するためのライブラリーで、BSDライセンスで公開されているオープンソースソフトウェアです。「モバイルフレンドリー」と銘打たれるほどに軽量ながら、十分な機能を持ち多様な環境に対応しています。もちろん無料で使用することができます。
また、開発者コミュニティーから提供される非常に多彩なプラグインを利用することで、必要な機能を追加することが可能です。LeafletはFacebookやFoursquareといった大規模なサービスにも採用されていて、信頼性が高いライブラリーだと言えます。

それでは、Leafletを使った地図表示の実装について見ていきましょう。

まずは地図を表示してみよう

最初に、Leafletの動作に必要な準備と、シンプルな地図の表示を行ってみましょう。

Leafletの入手方法は、こちらのページに記載されています。
Download – Leaflet

今回は、ダウンロードせずにホスティングされているものを利用します。以下のタグをHTMLファイルのheadタグの内部に記述しましょう。

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

地図を表示させるdiv要素と、高さを設定するスタイルを記述します。

<div id="map"></div>

#map {
  height: 300px;
}

ここで、地図を作成して画面に表示するJavaScriptコードを書きます。

ところで、注意すべき点としてLeafletは地図の表示処理とUI操作を制御するライブラリであり、地図そのものの画像（タイル）は別途用意する必要があります。
Google Maps APIであればGoogleマップが持つ地図データを利用するため、特に考慮することはありませんでしたが、今回はそうは行かないわけですね。

タイルにはOpenStreetMapで提供されているものなどが使えますが、ここでは国土地理院が公開している地理院タイルを使用してみましょう。国内の測量データに基づいた詳細な地図画像が、Web上でのオンライン表示の場合は出典を明示すれば申請不要で利用できます。（参考: 地理院タイルのご利用について）

地理院タイルを使って、シンプルな地図を表示するコードは以下のとおりです。

// 地図を作成する
var mymap = L.map('map');

// タイルレイヤーを作成し、地図にセットする
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">国土地理院</a>',
}).addTo(mymap);

// 地図の中心座標とズームレベルを設定する
mymap.setView([37.508106, 139.930239], 13);

Google Maps APIで表示した地図さながらに、マウスのドラッグやダブルクリックで表示位置を移動したりズームしたりすることができます。タッチデバイスで開けば、スワイプやピンチでの操作も可能です。

タイルレイヤーを作成する箇所では、地理院タイルのタイル画像URLを設定すると共に、出典情報のリンクをattributionオプションに渡しています。

マーカーを表示してみよう

次に、地点情報を示すためのマーカーを地図上に置く方法です。
これは至って簡単で、位置を指定してオブジェクトを作成するだけです。クリック時にポップアップメッセージを表示させることもできます。

// マーカーを作成する
var marker = L.marker([37.508106, 139.930239]).addTo(mymap);

// クリックした際にポップアップメッセージを表示する
marker.bindPopup("会津若松駅");

マーカーのアイコンを、独自に用意した画像で表示することもできます。
必要な属性をセットして作成したアイコンを、マーカーを作成する際に指定します。

// アイコンを作成する
var markerIcon = L.icon({
    iconUrl: 'http://www.nowhere.co.jp/blog/wp-content/uploads/2018/07/marker.png', // アイコン画像のURL
    iconSize:     [32, 32], // アイコンの大きさ
    iconAnchor:   [16, 32], // 画像内でマーカーの位置を指し示す点の位置
    popupAnchor:  [0, -32]  // ポップアップが出現する位置（iconAnchorからの相対位置）
});

// 上記で作成したアイコンを使用してマーカーを作成する
var marker = L.marker([37.508106, 139.930239], {icon: markerIcon}).addTo(mymap);

図形を表示してみよう

地図上に折れ線、円、矩形、多角形といった図形を載せることもできます。
これを使って、経路を図示してみましょう。

var route = L.polyline([
    [37.507543, 139.930619],
    [37.507016, 139.932408],
    [37.498371, 139.928649],
    [37.495337, 139.928006],
    [37.495123, 139.929800],
    [37.494833, 139.929750]
], {color: "blue", weight: 6}).addTo(mymap);

この折れ線（polyline）の例では、始まりから終わりまでの各頂点の位置を渡して形状をセットしています。この際、オプションで線の色や太さを指定可能です。
円や矩形の場合は、枠線の種類や塗りつぶし方を指定することができます。

終わりに

Google Maps APIの代替の一つとして、Leafletと地理院タイルを使用して地図表示を行う方法をご紹介しました。
今回挙げた機能だけでも十分活用できますが、Leafletには他にも高度な機能が備わっていますので、APIリファレンスを眺めて見るのも面白いでしょう。
皆さんのプロジェクトにもぜひ応用してみてください。

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY