【2018年7月16日版】Google Maps の APIキー を取得する

Google Mapsは、ver3(現在のバージョン)は「APIキーが必要」ですが APIキーが無くてもサイトに地図は表示されていました。
それが、2016年6月22日から新規サイトでGoogle Mapsを使用する場合は「APIキーが必須」になりました。

そして 2018年7月16日よりGoogleマップはAPIキーを設定していても「Google Cloud Platform」で 請求先アカウントとプロジェクト(APIキー)を紐づけていないと GoogleMaps が表示しなくなります。
また、今までAPIキーが無くても GoogleMapsが表示されていたサイトも表示しなくなります。

Googleマップを表示させるには「Google Cloud Platform」で APIキー と 請求先アカウントとプロジェクト(APIキー)を紐づける必要があります。
今まで使っていたAPIキーを利用したい場合は「移行ツール」というのを使って進めていく方法もありますが ここでは新しくAPIキー取得と請求先アカウントの設定方法を紹介します。

「Google Maps Platform の提供を開始 : Google マップのビジネス利用がさらに進化 」
https://developers-jp.googleblog.com/2018/05/google-maps-platform-google.html

「Google Maps Platform」
https://cloud.google.com/maps-platform/

「既存ユーザー用ガイド | Google Maps Platform」
https://cloud.google.com/maps-platform/user-guide/

「既存ユーザー用ガイド | Google Maps Platform アカウントの変更 」
https://cloud.google.com/maps-platform/user-guide/account-changes/

準備

まず以下のものを用意してください。

Googleアカウント

サイト所有者のアカウントが理想的ですよね。
※クレジットカード情報を登録していただきます。

ブラウザ

ブラウザは できれば Chrome(クローム) を使ってください。
※他のブラウザでは一部崩れている所がありますので登録失敗するかもしれません。

APIキー取得

「Google Maps Platform」にアクセスしてください。

※ログインしていない場合はここで準備したアカウントでログインしてください。
右上の「スタートガイド」か左下の「使ってみる」をクリックしてください。

1.Pick a product


どのAPIを有効にするかチェックする所がありますので3つともチェックを入れて「CONTINUE」ボタンを押してください。

2.Select a project

プロジェクト名を設定します。

Select or create project で 「+Create a new project」を選択してください。


「My Project」と仮のプロジェクト名がつきますので後でわかりやすいように変更しといてください。
※ここでは「My Project」のまま進みます。
右下の「NEXT」をクリックします。

3.Set up your billing

請求先情報の登録画面になります。

受諾で はい を選択「同意して続行」をクリックしてください。

ここでは お客様情報とクレジットカード情報を入力します。

お客様情報とクレジットカード情報が登録されると「APIの有効化」に移ります。

「次へ」をクリックしてください。

APIの有効化が完了したら APIキーが表示されます。

これでAPIキーは取得できました。
※この記事を書いてる時は 「My Project」が 反映されるまで 十数分かかりました。

 
 

APIと認証情報の設定方法

上記で取得したAPIキーは、まだ制限がかかっていません。
この状態では誰でもこのAPIキーを利用する事ができてしまうので以下の方法で制限をかけます。
キーの利用を制限する事で、このキーを使用できるウェブサイトを指定できます。

Google Cloud Platform」へアクセスします。

違うプロジェクトになっている場合は上の▼をクリックして「My Project」に変更します。

「APIの概算に移動」をクリックします。

APIの設定

「有効なAPIまたはサービスがありません」と でますので「APIとサービスの有効化」をクリックします。

APIライブラリのページで「Maps JavaScript API」をクリックしてください。

「有効にする」ボタンを押してください。

「Maps JavaScript API」が有効になりました。

APIを追加する場合はサイドメニューの「API」をクリックして「未使用の API」から追加してください。

不動産プラグインを利用している場合は
「Geocoding API」を 追加して有効にしてください。(必須)
「駅から物件までのルートを表示」を使う場合は「Directions API」を追加して有効にしてください。
「標高」を使う場合は「Maps Elevation API」も追加して有効にしてください。

認証情報の設定

左上の「Google Cloud Platform」のロゴをクリックしてトップページに移動してから

「APIの概算」に移動をクリックします。

サイドメニューの「認証情報」をクリックします。

「認証情報を作成」ボタンを押して 「ウィザードで選択」エリアをクリックしてください。

ウィザードでは「Maps JavaScript API」を選択して「必要な認証情報」ボタンを押してください。

APIキーが新しく作られました。

次にAPIキーのアクセス制限の設定をします。「キーの制限」をクリックしてください。

ここでは「APIキーの利用制限」をします。

ラジオボタンの「HTTPリファラー(ウェブサイト)」をクリックします。

「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。
※ワイルドカード( * )が使えますので * を使ってURLを設定します。
://*.example.com/*

 例 http://*.example.com/*  www等のサブドメインがついた example.com と下位のURL
 例 https://example.com/*  example.com と下位のURL
 例 localhost/*  ローカルのテスト環境で使う場合。

複数設定できますので、ローカル開発環境用、WEBテスト用、本番用とか設定しておくといいかもしれません。

URLを入力したら「保存」ボタンを押してください。

APIの設定画面に戻りました。こちらのAPIキーを使ってください。

「API Key」の横のが無くなっている事を確認してください。
□(フォーム左の四角)ボタンをクリックしてコピーしたAPIキーをメモしといてください。

以上で認証情報の設定は終了です。

 
 

APIキーの使い方

Google Mapsを表示する場合、ページのヘッダー(又はフッター 又はbody内)に Google Maps用のScriptを読み込むコードを記入してます。
そのコードに key={APIキー}を追加するだけです。

静的ページの場合

APIキー無し(従来の書き方)

<script src="https://maps.googleapis.com/maps/api/js"></script>

APIキー有り

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

WordPressの場合

WordPressの場合は以下のコードを my-plugin.php に張り付けてください。

/**
 * GoogleMaps jsを追加 footer
 *
 * License: GPLv2 or later
 */
function add_footer_enqueue_scripts_googlemaps_js() {
	wp_enqueue_script( 'googlemapapi', 'https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', array(), '', true );
}
add_action( 'wp_enqueue_scripts', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

※XXXXXXX・・のところにAPIキーを入れてください。

または、こちら

/**
 * GoogleMaps jsを追加 footer
 *
 * License: GPLv2 or later
 */
function add_footer_enqueue_scripts_googlemaps_js() {
	echo '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script>';
}
add_action( 'wp_footer', 'add_footer_enqueue_scripts_googlemaps_js', 99 );

※XXXXXXX・・のところにAPIキーを入れてください。
※wp_footerフィルターの方が下側になります。

HTMLソースの一番下側にこれを出力させる事が ミソです。
もしかしたら何かのプラグインでキー無しでGoogle Maps用のScriptを書き込まれていても これが最終読込でマップが表示されるようになります。
※内部的には2重読込してますよとエラーはでますが、、

不動産プラグインの場合

管理画面の「設定」→「不動産プラグイン設定」で
kihon_10b
こちらにAPIキー を入力してください。