Googlemap APIのAPIキーの取得と使用する際に必要な設定について

これまで普通に使用出来ていたのに、突然エラー表示されるようになってお困りになっている方も多いかと思います。
そこで料金体系がどうなったのか、APIキーの取得方法と使用前に設定することをまとめてご紹介いたします。

こんな表示になっているGoogle MAPはAPIキーが必要

早速ですが、料金体系変更によって影響を受けているホームページ埋め込み型のGoogle MAPは以下のスクリーンショットのようなものになります。

Google mapがグレーで表示されFor development purpose onlyと表記されるのはAPIキーがGoogleMAPを呼び出すコードに含まれていないからです。

何故このようになったのか。GoogleMAP APIの料金体系の変更について

GoogleMAP APIの利用が全面的に有料化され、2018年7月16日よりAPIキー無しで利用する事が出来なくなりました。
全面的に有料化といっても毎月200ドル分無料クレジットがチャージされるため、アクセス数が少ない場合これまでと変わらず無料で利用は可能です。
（Google曰く殆どのサイトは大丈夫だそうです）

また利用料がかからないAPIの利用方法も用意されているので、必ずしも料金は発生しません。

ただこのような仕組みになったため支払い情報と紐ついたAPIキーが必須となりました。

ちなみに料金表は▼こちら
https://cloud.google.com/maps-platform/pricing/sheet/

Webサイトに埋め込んだGoogle MAPがどのAPIを使っているか調べる方法

Googleが提供しているGoogle Chrome拡張機能「Google Maps Platform API Checker」を利用することで、どのAPIを使用しているか確認できます。

Chromeにインストール後、調べる対象のWebサイトを開き、拡張機能のアイコンをクリックするだけで簡単に確認できます。

アイコンをクリックすると詳細が表示されます。

ちなみにこのEmbed APIは料金表によると課金無しで使用できますが、利用するにはAPIキーが必要となります。
参照：Embed API開発者ガイド

APIキーの取得方法

APIキーの取得のために必要なものは

・Googleアカウント（個人用ではなく出来ればAnalyticsを利用しているな会社共有のものの方が望ましいかと思います）
・クレジットカード

となっています。それではスクリーンショットと共に解説していきます。

Google Maps Platformにアクセス

▼こちらのURLからGoogle Maps Platformにアクセスしてください。

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

東京タワーがキレイですね。

まず画面中央左の「使ってみる」をクリックしてください。

ダイアログが表示されますので、「Maps」「Routes」「Places」の全てにチェックを入れ、CONTINUEをクリック。

その後プロジェクトを選択するように表示されますが、「Select or create project」をクリック。

その後「+Create a new project」をクリック

お好きなプロジェクト名を入力してください。

プロジェクト名は4〜30文字で、半角英数字、スペース、ハイフンのみが使用できます。

請求・支払い情報の登録

続いて請求・支払いに関する登録を進めていきます。

「請求先アカウントの作成」をクリック

利用規約に同意するチェックボックスにチェックを入れ、「同意して続行」をクリック

お客様情報とクレジットカードの情報を登録し、「無料トライアルを開始」をクリックしてください。

登録が完了したら「Googleマッププラットフォームの有効化」が表示されますので「次へ」をクリック

無事有効化されるとAPIキーが表示され、取得が完了します。「DONE」をクリックしてください。

APIの設定をする

ここまででAPIキーは無事取得出来たのですが、このままだと誰でも利用出来てしまう状態なので制限をかける必要があります。

APIキーの利用制限は使用出来るURLを設定することで、自分たち以外に使用できなくします。

Google cloud platformで利用制限設定をする

まずGoogle cloud platformへ移動します

https://console.cloud.google.com/

まず、赤枠内のプロジェクト名が先程設定したものか確認してください。

違うものが表示されている場合、右側の▼をクリックし、先程作成したプロジェクト名に変更します。

プロジェクト名を確認後、「APIの概要に移動」をクリック

「APIとサービスの有効化」をクリック

一覧の中に「Maps JavaScript API」があるはずなので、それをクリックしてください。

画面遷移後、「有効化」をクリック。
これでAPIが有効化されます。

有効化されると画面が遷移します。

続いて認証設定を行います

認証情報をクリック

「認証情報を作成」をクリック

「ウィザードで選択」をクリック。

「選択」をクリック後「Maps JavaScript API」を選択し、「必要な認証情報」をクリック

「キーの制限」をクリック

※もし「キーの制限」をクリックせずに「完了」をクリックした場合は、遷移後の画面で一覧のなかからAPIキー名をクリックしてください。

HTTPリファラーを選択すると入力窓が表示されるので、そこにURLを入力します。

この際、アスタリスク（*）を使用することで、サブディレクトリやサブドメインにも適用させることが出来ます。

サブドメインを使用していない場合は
http(s)://ドメイン名/*

サブドメインを使用している場合は
http(s)://.ドメイン名/

と入力すると良いです。

複数設定できますので必要に応じて追加してください。

弊社コーポレートサイトで使用する場合は
https://www.infact1.co.jp/*
と入力しています。

複数のURLを設定することも可能です。

入力後は「保存」をクリックしてください。

画面遷移後、APIキー名の横にあった黄色い▲が消えていれば完了です。
「キー」欄に表示されているAPIキーをクリップボードにコピーし、メモしておいてください。

まとめ

Google MAP APIのAPIキーの発行手順はこのようなものになります。

まとめると

①支払い情報の登録
②APIキーの利用制限をかける

この２つを済ませることでAPIキーが利用可能となります。

API取得後ですが、もっともよく利用されているであろうembed APIの場合は

この「YOUR_API_KEY」と書かれているピンクの部分にAPIキーを書き込めば利用可能です。
※参照：Embed API開発者ガイド