WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >サービス

6月11日（月）から新たな仕様変更になるGoogle Maps JavaScript API（※現在は名称が「Maps JavaScript API」に変更されています。）について、APIキーの取得方法から、仕様変更に伴う設定方法を解説していきます。

GoogleアカウントでGoogle Developers Consoleにログイン

APIキーを取得するにはGoogleアカウントが必要になるので事前にアカウントを作成しましょう。
アカウント作成ができたら、Google Developers Consoleへアクセスします。

ログインが完了したら、【プロジェクトの選択】をクリック。

既にプロジェクトを作成されている方は利用するプロジェクトを選択。
まだ使った事の無い方は【新しいプロジェクト】をクリックしてプロジェクトを作成します。

新しいプロジェクト名を作成しましょう。【作成】をクリックして、プロジェクトの作成は完了です。

APIを有効化する

続いて、「Maps JavaScript API」を有効化していきます。

【APIとサービスの有効化】をクリックすると、APIとサービスを検索できるページに遷移します。

検索窓で、「Maps JavaScript API」と検索してみましょう。
※今まで通り「Google Maps JavaScript API」で検索しても大丈夫です。

検索結果に出てきた「Maps JavaScript API」を有効にします。
これでこのプロジェクトで「Maps JavaScript API」が使用できるようになります。
その後、「認証情報を作成して下さい」という案内が表示される場合があります。認証情報とは、この後に作成するAPIキーのことです。

APIキーを作成する

【認証情報を作成】のボタンをクリックし、APIキーを選択します。

これで、APIキーが生成されました。

作成されたAPIキーでGoogleMapを利用したサイト制作ができるようになります！

ここで気になるのが、黄色いビックリマークですね。
「本番環境での不正利用を回避するため、キーを制限してください。」と書いてありますが、これは不正利用を防ぐためAPIキーの使える範囲を制限することが可能な事を示しています。
それでは早速設定をしていきましょう。

APIキー制限

APIキーの一覧から、編集したいAPIキーをクリックします。
APIキー編集画面では、まず後々管理がしやすいように名前を変更しましょう。

続いてAPIキーの制限です。

アプリケーションの制限の項目より、【HTTPリファラー（ウェブサイト）】を選択肢し、APIキーを使用するwebサイトのURLを追加します。
追加されたURLのwebサイトでは、APIキーを利用したGoogleMapが表示されますがそれ以外では表示がされません。
APIキーを不正に利用されることが無いので安心ですね。これでAPIキーを使用するための設定は完了です。

実際に、webサイトにてAPIキーを利用するときは【{API_KEY}】の部分にキーを入れて＜head＞～～＜/head＞タグ内に入れましょう。

<script src="https://maps.googleapis.com/maps/api/js?key={API_KEY}"></script>

6月11日（月）から新たに仕様変更になる

これまでは、Googleのアカウントを持っていればAPIを使うことができましたが、2018年6月11日(月)からは無料で使う場合でも、Googleアカウントの取得に加え、クレジットカード情報の登録が必要となりました。

これまで通り、一定のアクセス数までは無料で使えますが、支払い情報の登録をおこなわないと、最悪の場合、全くマップが表示されなくなる可能性があります。
そもそもどうしてクレジットカードの情報登録が必要になってしまったのかというと、Google Mapのサービスを大幅に刷新し、APIの利用料金体系が大きく変更になったためです。
たとえ、月額無料枠内での使用であっても今後は支払い情報の登録が必要となります。

では、どこでクレジットカードの情報を登録するのか説明していきます。

お支払い情報の登録

APIを利用するアカウント情報でGoogleへログインします。
最初に表示されるこちらの画面の【お支払い】をクリック
【お支払い】の項目へジャンプするので、【お支払いセンターへ移動】をクリック。

【お支払い方法を追加】をクリックしてクレジットカード情報を登録しましょう。

これで、クレジットカード情報が登録されました。
無料枠を超えないように制限をかける事もできるので、勝手に課金がされることはありません。

APIを利用したマップが急に見えなくなる前に、事前の対処を忘れずにおこないましょう！

【追記】移行日が7月16日（月）に変更されました

6月11日（月）から新たに仕様変更になる旨を前述で紹介致しましたが、移行日が7月16日（月）に変更されました。
同日までは従来の標準プランでの運用になるので、お支払い情報の登録やAPIキーが未実装の場合でもGoogleMapが表示されます。
ですが、7月16日（月）以降、APIキーを取得していないGoogle Mapは利用不可となり、お支払い情報未登録の場合は半透明グレーがマップに被さる形で表示されます。

規約上は同日より使えないことになっているので、それ以降のいつでも通告なく（通告は6/11という扱い）エラーになる可能性があります。

日付変更がありましたが、上記のAPIキーの取得やお支払情報の設定が完了されていない方は早めの対処をしておきましょう。