【要確認】Google Maps Platform APIキーの取得方法と注意点

「Google Mapが突然表示されなくなりました」

TCDのカスタマーサポートに寄せられる質問でも多い部類に入ります。今回はGoogle Mapの表示に関わるGoogle Maps Platformについて実際の取得作業を行いながら、記事を作成しました。GoogleMapで不具合のある方の参考になれば嬉しく思います。

突然Googleマップが表示されなくなってしまった場合は、まずAPIキーの設定を確認しましょう。今回の記事ではAPIキーの取得方法と、TCDテーマでGoogleマップを使用する場合のAPIキー設定方法をご紹介します。以前からAPIキーは存在していましたが、あいまいな運用をしている人（会社）が多い印象もありました。それは、APIキーの設定が無くてもマップが表示されていたり、結構な規模のメディアにおいても有料プランを使わずに運用できているといった話も聞いていたからですが…そのようなケースだと今回の仕様変更では重い腰を上げないといけなくなったのかもしれません。あなたも他人事と思わず、これを機に、管理サイトを確認して、設定を見直してみましょう。

GoogleMapが表示されなくなった理由について

今回の変更が原因で、グーグルマップが非表示になる原因としては大きく3つあります。1つ目は新規ドメインでの地図表示には「APIキー」の必須になったこと、2つ目にマップの読み込み上限数の大幅ダウンがあります。3つ目はに課金設定を有効にしていない場合です。

それぞれのトラブル対応について

APIキーとは、Google Maps APIを使用するための鍵のようなもので、取得したAPIキーをWebサイトのHTMLファイルにあるスクリプトタグ内に記述することでGoogleマップを表示することが可能になります。APIキーを使えるように設定したサイトには無償の使用制限の中でまずMapが使えるようになります。Mapの読み込み数によって自動で課金状態に移行するため予めクレジットカードや販売代理店での支払い（課金）設定が必要です。
支払い（課金）設定に関しまして、現時点でインターネット上で情報を検索をしてみると無料使用の範囲では課金設定不要という内容をいくつか見ることがあります。対応に何らかの差がある可能性はありますが、今後の為にも早めの設定を行うようにしましょう。外部サービスを使用するコツみたいなものかもしれませんが、仕様面の分かりにくい点は自分たちで解釈しようとせず公式に問い合わせた方が良いと思います。

Google Maps Platformのサポート
※要ログイン

APIキーを利用していない場合

APIキーを設定していないアクセスについては地図が表示されなくなります。その他のAPI機能もご利用できなくなりますので、この記事を参考に対応をお試しください。

無償枠200ドルを超えた場合

現在（2018年7月16日以降）は、「Google Maps Platform」が適用されています。簡単にいいますと、月間で200ドル(※1)を超えた場合、クレジットカードの登録もしくは代理店のコード（代理店支払い登録）がなければ、超過した段階で地図が表示されなくなります。同時に同じアカウントに紐づいたその他のAPI機能も利用に制限が掛かってしまいます。

課金設定をしていない場合

API キーをお持ちの場合は、移行ツールを使用し、Google Maps Platform API を使用しているすべてのプロジェクトを課金アカウントで管理するようにします。課金設定後に無料枠を超えないようにする設定をこちらで説明しております。

これまでとの(2018年7月16日前後の)違いを調べました

	変更前	変更後
無償版	公開利用において、1日25,000マップロードまで無償 （月間30日で750,000マップロード）	月間28,000マップロードまで無償 ※超えた分は請求対象
有償版	最低の支払いが年間100万円以上から	0円から利用可能

「Maps JavaScript API」において、これまでは「25,000リクエスト/日」まで無料だったのですが、これからは「28,000リクエスト/月」と、大幅に縮小されているようです。（1日あたり→1ヶ月あたり）しかも、他のAPIを使うと合算されてしまうということで…ちょっとアクセスが多いサイトは不安になりますよね…その場合は「Google Maps Embed API」のMAP（iframeタイプ）に切り替えると無料のまま心配なく運用できるようです。

※月間200ドルは各API機能を利用した場合の合算となります。詳しくはGoogle Maps Platformの料金をご覧ください。

Google Maps Platformの料金

それでは実際にAPIキーを取得設定してみます

この記事ではGoogle Maps Platformの利用に必要な、Googleアカウント作成〜APIキーの指定、有効化の方法についてご紹介します。Googleアカウントに関しては既に持っている人が多いかもしれませんが、もし未取得でしたら参考に登録から進めていただけたらと思います。持っている人はGoogle Maps Platformの設定から進めてください。

APIキーの設定手順（クリックで該当箇所に遷移します）

Googleアカウントの作成

Google APIコンソールにてAPIキーを作成する場合、Googleアカウントにて作成を行います。Googleアカウントをお持ちでない場合はGoogleアカウントの作成を行う必要があります。下記のページを参考にGoogeアカウントの作成を行ってください。

Googleアカウントのヘルプ

Google Maps Platformにてプロジェクトの作成

Googleアカウントをお持ちでない場合は先にGoogleアカウントの作成を行う必要があります。

下記のページに接続し、「プロジェクトの選択」をクリックしてください。

Google Maps Platform

プロジェクト選択画面の「新しいプロジェクト」をクリックしてください。

プロジェクト名を入力して「作成」ボタンをクリックしてください。

APIの有効化

「Googleアカウント作成」と「Google Maps Platformにてプロジェクト作成」作業が完了していますか？また、下記のGoogle APIコンソールのダッシュボードに接続していることを前提に次の手順を案内します。

Google APIコンソールのダッシュボード

作成したプロジェクトが選択されていることを確認しましょう。「開く」を押して次に進みます。

プロジェクトを選択して進めた状態で左側メニューから「APIとサービス」→「ダッシュボード」をクリックしてください。

「APIとサービスの有効化」リンクをクリックしてください。

利用したいAPIを選択してください。（今回はホームページにjsを使ったGoogleMapを表示したいのでMaps Javascript APIを選択しています）

利用したいAPI選択後、「有効にする」ボタンをクリックしてください。

あまり通常のウェブコンテンツ利用では使うことが無いかもしれませんが、Mapを多様しているウェブサイトをアプリ化している場合は影響があるかもしれませんので簡易的ですがMaps JavaScript APIで取得できるフィールドの種類と機能についてまとめてみました。新しいメニューも増えて取得する情報の量によって、価格(単価)が変わるということです。GoogleMapはAPIをガシガシ触ってものすごく活用してます！という人以外は影響ないと思います。

引用元はこちらです。
Maps JavaScript API
Places Library

ダッシュボードに有効化したAPIが表示されていることを確認してください。他に利用したいAPIがある場合は前の手順を繰り返しましょう。

細かい仕様、使用ルールについては公式のマニュアルを参照してください

API キーの使用についてGoogleCloudドキュメント

APIキーの作成

「認証情報」リンクをクリックして、「認証情報を作成」メニューから「APIキー」を選択します。

この時点でAPIキーは作成されますが、誰でもAPIキーを使用できる状態になっていますので、使用範囲制限の設定をします。セキュリティの強化のため「キーを制限」から設定を行ってください。

名前とアプリケーションの制限を指定します。

HTTPリファラー（ウェブサイト）
HTTP リファラーによる制限
IPアドレス（ウェブサーバー、crronジョブなど）
IP アドレスによる制限
Androidアプリ
パッケージ名およびフィンガープリントによる制限
iOSアプリ
iOS バンドル識別子による制限

今回はWordPressで作ったウェブサイトに使用するので「HTTPリファラー（ウェブサイト）」を指定してウェブサイトの制限に必要な項目を埋めていきましょう。

キーを利用するAPIに適したキーの制限を行います。キーの制限を行わずにAPIキーを利用した場合、外部にキー情報が洩れると悪意のあるユーザに利用されてしまう恐れがあるのでご注意下さい。下記から適切な制限を選択して設定を保存して下さい。

https://(API使用ドメイン)においてAPIを制限設定（ドメイン許可）をする場合についての設定例：
①ドメインの配下階層全てにおいてAPI使用を許可する。
https://(API使用ドメイン)/*
②サブドメインの配下階層全てにおいてAPI使用を許可する。
https://*.(API使用ドメイン)/*

もう一つ制限設定を行う箇所があります。※2018年10月追記

ひとつ前の設定で指定したURLにおいて、使用をするAPIキーを選択、設定しましょう。
(TCDのカスタマーサポートに寄せられたMAP非表示トラブルの大半がこちらの設定を行っていただくことで改善されたようですので追記しました。)

WordPress、ホームページで地図を表示するよ！という時によく使われるAPIは以下の3つだと思われますので、よくわからない場合は参考に設定して表示をご確認ください。※使わないものは設定から外しておくほうが好ましいと思います。

Maps Embed API、Geocoding API、Maps JavaScript API

支払い情報の登録（クレジットカード）

請求情報の登録を行います。無償枠を超えた場合自動で従量課金に移行するため、事前に請求情報の登録が必要となりました。しかし、セルフ設定できる方法はクレジットカードでの支払いとなってしまうようなので法人としては使いづらいこともあるかと思います。（Googleの国内代理店を通すことで設定は可能）

Google Maps Platformを開いて、使ってみるをクリックします。Googleアカウントにログインしていない場合は、右上のログインからログインして進めましょう。

Maps Routes Placesのうち、利用したいものにチェック後、「CONTINUE」をクリックします。Javascriptを利用してウェブサイトに地図を表示したい場合はMapsにチェックでOKです。

初回アクセスの場合は新規プロジェクト名を入力しますがこのページに書いてある前の手順を実行しておられる場合、既存のプロジェクトから選択できるかと思います。選択後NEXTをクリックします。
以降はそれぞれの請求先情報を埋めていくと完了です。

無料枠を超えないように制限の設定をしておく

管理サイトにマップは表示したいけれど、利用料金をかけたくないという場合や、料金がかからないか不安な場合は利用量を制限することも可能です。

Google Cloud Platform Console

左側のメニューから「API」を選択。
使用中のAPIを選択　＞　割り当て
にて上記キャプチャの画面に移動できます。そちらでリクエスト数の上限を細かく設定することで課金を防ぐことができるはずです。

作成したAPIキーをサイトに指定します

それぞれのコンテンツの指定形式に応じて作成したAPIキーを各APIに指定します。
Google Maps JavaScript APIを読み込む際に、パラメーターのkeyの値としてAPIキーを指定すればOKです。

<script src="https://maps.googleapis.com/maps/api/js?key=【APIキーをここに指定】"></script>

TCDテーマをご利用の場合はTCDテーマオプションから簡単に設定できます。
ダッシュボード　＞　外観　＞　TCDテーマオプション　＞　基本設定内

まとめ

Googleなど外部サービスを利用する際は細かな利用規約の変更、仕様変更に気を配らなくてはいけません。どこのウェブサイトでも当たり前のように導入されているサービスだからといって何も考えずに導入をしていると、注意力が低下して今回のような仕様変更で痛い目を見ることもあります。無意識にGoogleMapをチョイスしているのでしたらこれを機にMap表示の手法自体を見直すのも良いかもしれません。クラウドサービスで手軽に依頼も可能な時代でもありますし、オリジナルのマップに表示を変更するというのも良いかもしれません。別の方法であってもそちらの方がよかった！という発見も期待できます。今の時代はたくさんのサービスがありますので、サービスをしっかりと取捨選択しながら運用していけるように心掛けていきましょう。

Google Maps APIに関する質問は、弊社に寄せられるお問い合わせの中でも多い方です。よくあるご質問にも対応方法を記載しておりますので、よろしければ参考にご覧ください。

今回の記事を動画にしました。よろしければご参照ください。