目次
Google Mapが2018年7月16日からAPIキー必須&有料に！
（サンプルコード付）
サイトやアプリに埋め込むGoogle Mapsが2018年7月16日からAPIキーが必須なり、使用量に応じて課金されるようになりました。
この条件を満たしていないと、利用されているGoogle Mapsが突然表示されなくなるかもしれません。
1対応が必要なサイトまたはアプリ
①APIキーを利用していない
APIはGoogle Mapsの機能をJavaScriptなどのプログラムで呼び出す仕組みです。これらのプログラムを使用する際に、呼び出し元のサイトまたはアプリを識別するために使用されます。
APIキーの取得の仕方は後述します。
②マップロード数の上限を超えてしまっている
今回の仕様の変更で、地図の読み回数750,000回/月が無償だったのに対し、28,000回/月（動的な地図の場合）と大幅に減少しました。
無償範囲を超えて使用した場合は、1,000回ごとに右のように使用料が発生します。
| 無償分（200$） | 0～100,000 | 100,001～500,000 | |
|---|---|---|---|
| Embed | 読み込み無制限 | $0.00 | $0.00 |
| Static Maps | 最大 100,000 読み込み | $2.00 | $1.60 |
| Dynamic Maps | 最大 28,000 読み込み | $7.00 | $5.60 |
※500,001 以上は個別対応 ※Embed（iframeで埋め込み）、Static Maps（静的地図）、Dynamic Maps（動的地図）
制限を超えて地図が表示されなくなったと慌てないうちに、Google Cloud Platformから支払い設定を行いましょう。
Google Cloud Platformのダッシュボードの左メニュー「お支払い」から設定できます。
2地図の表示方法の確認
Google提供するChrome用の「Google Maps Platform API Checker」という機能拡張ツールがあります。
機能拡張をインストール後、Chromeで確認したいページを開いて、ブラウザの右上にあるピンの色を確認してください。ピンの色によってAPIキー対応の有無がわかります。
- 緑のピン
API Keyが登録・設定されています - 赤のピン
API Keyの設定が行われていない可能性があります - グレーのピン
Google Maps APIsが利用されていません
3APIキーの設定方法
Google Maps Platformにアクセス。
※Google Accountにログインしていない場合はログイン後、右上の「スタートガイド」か、左下の「使ってみる」をクリック。
https://cloud.google.com/maps-platform/
- STEP.1 APIキーの作成
- ＞
- STEP.2 APIキーの認証
- ＞
- STEP.3 APIキーの使い方
STEP.1APIキーの作成
Pick product(s) below
プロダクトの選択画面になります。最終的に使用APIを選択することになるので、ここでは全てにチェックで大丈夫です。
Select a project +Create a new projectを選択し、任意で名前をつけて「NEXT」をクリック。
請求先情報の登録画面になるので「請求先アカウントの作成」をクリック。
国を選択、受諾と利用規約で「はい」を選択後、「同意して続行」をクリック。
お客様情報とクレジットカード情報を入力。
お客様情報とクレジットカード情報を入力するとAPIの有効化に移行します。
APIの有効化が完了したら APIキーが表示されます。
- STEP.1 APIキーの作成
- ＞
- STEP.2 APIキーの認証
- ＞
- STEP.3 APIキーの使い方
STEP.2APIキーの認証
APIキーを使用できるウェブサイトを指定することでAPIキーに認証をかけます。
これによりAPIキーの利用を制限する事できます。
APIの概算に移動をクリック。
「有効なAPIまたはサービスがありません」とでるので「APIとサービスの有効化」をクリック。
APIライブラリのページで「Maps JavaScript API」をクリック。
「有効にする」をクリック。
Google Chrome Platformのトップページ移動し「APIの概算」をクリック。サイドメニューから「認証情報」をクリック。
「認証情報を作成」ボタンを押して 「ウィザードで選択」エリアをクリック。
ウィザードは「Maps JavaScript API」を選択して「必要な認証情報」ボタンをクリック
APIキーが新しく作られ流ので「キーの制限」をクリック。リファラーの設定を行います。
//*.example.com/*
この書き方をすると、http・httpsにかかわらず、ドメイン内全てに適用されます。
URLを入力したら「保存」ボタンをクリック。
- STEP.1 APIキーの作成
- ＞
- STEP.2 APIキーの認証
- ＞
- STEP.3 APIキーの使い方
STEP.3APIキーの使い方
以下のコードはサンプルコードです。
表示したい箇所の緯度をlatに、経度をlngにを入力し、YOUR_API_KEYに作成したAPIキーを入力します。これでAPIキーを使ったGoogle Mapが表示されます。
4シンプルに表示させたい方のために
静的な地図を使用してロード回数を増やす
動的な地図の場合28,000回/月が無償分となりますが、これを静的な地図に変更して100,000回/月まで利用する方法です。
静的地図は、動的地図のように地図の移動などはできませんが、非常に軽量なので表示速度が上がります。
- src=”http://maps.googleapis.com/maps/api/staticmap? ⇒ グーグルの地図を使用する宣言。
- center=緯度,経度 ⇒ 中心の座標の設定。
- &zoom= ⇒ 拡大率。
- &size=625×420 ⇒ 表示サイズは横625pxで縦420px。
- maptype=roadmap ⇒ 道路地図タイプで表示。
（satellite: 航空写真、terrain: 地形図、hybrid: 航空写真と道路地図の組み合わせ） - &markers=color:red ⇒ マーカーの色を指定。
（black,brown,green,purple,yellow,blue,gray,orange,white から指定） - %7Clabel:T ⇒ マーカーの中は「T」を表示。（半角英数一文字）
- %7C緯度,経度 ⇒ マーカーの位置の座標指定。
このように設定すると、画像として地図が表示されます。