#57 Google Map API有料化への対応【ぴよぴよコーダーの開発日記】

Google Mapといえば、手軽にWebページに地図を埋め込めるコードを提供していますが、その地図のデザインをカスタマイズしたい場合などは、Google Map APIを利用してJavaScriptで実装していたかと思います。

以前は、Google Map APIを無料で使用することができたのですが、2018年の6月からは有料に変更となり、いまだに無料プランのまま使い続けているサイトでは、開発者専用（For development purpose only）という文字が地図の上にダーーーーーっと表示されるようになりました。

そんなわけで、有料化する方法をメモりたいと思います。まずはプラン

参考：料金とプラン

プランとしては、カスタマイズするので、「Dynamic Maps」に該当するかと。料金表ですが、月28000回APIをコールするまでは無料。それ以上コールされると月間使用量1000コールあたり7ドルのようです。下記料金表の、Dynamic mapsの欄を参照

参考：料金

参考：有料？無料？Googleマップの新サービス「Google Maps Platform」

そして、支払方法やAPIキーの取得方法は、こんな感じです。

参考：Google Maps APIキーを取得する方法

参考：Google Map APIキーの設定　お支払い情報登録（2018年度版）

ちなみに、地図のマーカーは変更できませんが、地図の色ごと変更したい（モノクロ地図など作りたい）場合は、APIを使わずとも、CSSのfilter機能で何とかなります。

コードのウィジェットを生成するにはGoogleMapの検索窓から、該当の地名を入力して、共有アイコンクリック、「地図を埋め込む」をクリック

モノクロ地図を表示したいときのソースはこちら

<style>
.graymap {
   filter: grayscale(1);
}
</style>

<iframe class="graymap" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7477985372293!2d139.7432388507774!3d35.65858483872397!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1604292272143!5m2!1sja!2sjp" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

デモ

参考：【API不要】Google Mapの色を変える／iframe形式