Google Maps の APIキー を取得する

Posted on Update by admin

Googleマップを表示させるには APIキー が必要です。
APIキーを取得する場合は 「Google Cloud Platform」で プロジェクトを作成し、プロジェクト内で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アカウント
※サイト所有者のアカウントが理想的です。
②クレジットカード
※請求先アカウントでクレジットカード情報を登録していただきます。

　
　

プロジェクトの作成

ブラウザ上でGoogleにログインしていない場合は事前に準備したアカウントでログインしてください。
「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 Test」として進みます。
※プロジェクト名は同名の物が作れますので 必ずユニークな名称にした方がいいです。(複数作るとあとでわからなくなりますょ)
右下の「NEXT」をクリックします。

3.Set up your billing

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

ここでは 後で 請求先情報を紐づけますので「キャンセル」をクリックします。
※APIキー取得後、この画面に戻って 請求先情報の登録を再開してください。

Google Cloud Platform ホーム

「My Project Test」というプロジェクトができました。
続いて APIライブラリ の登録をしますので「→APIの概要に移動」をクリックします。

　

スポンサードリンク



　

APIライブラリの登録

ここではGooglemaps で使うライブラリを登録します。

まずは「Maps JavaScript API」をクリックします。


「有効にする」をクリックします。

以下の画面になりますので 続いて 他に必要なライブラリも登録します。

「API」をクリックして

　

各ライブラリをクリックして「有効にする」をクリックしてください。
※これを繰り返してください。

【重要】
不動産プラグインを利用している場合は
「Geocoding API」「Directions API」「Maps Elevation API」も追加して有効にしてください。
不動産プラグインProを利用している場合は「Places API」も追加してください。

続いて APIキーの取得 をします。

　
　

APIキーの取得と認証情報の設定方法

ここで APIキー を取得します。また、この状態では誰でもこのAPIキーを利用する事ができてしまうので「HTTPリファラー」で制限をかけます。
※「HTTPリファラー」でAPIキーの利用を制限する事で、このキーを使用できるウェブサイトを指定できます。

APIキーの取得


「認証情報」をクリックします。

　

「APIとサービスの認証情報」をクリックします。

　

「+認証情報を作成」をクリックします。

　

「APIキー」をクリックします。


「APIキー」が作成されました。。

次に「キーを制限」をクリックしてください。

APIキーの利用制限

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

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


「このHTTPリファラー(ウェブサイト)からのリクエストを受け入れる」の欄で GoogleMapsを設置するURLを登録します。


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

※ワイルドカード( * )が使えますので * を使ってURLを設定します。
※://*.example.com/*

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

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

　

【重要】最後に「保存」ボタンを押してください。

　

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

□(項目「キー」右の四角)ボタンをクリックしてコピーしたAPIキーをメモしといてください。
※項目「APIキー」の左のマークがグリーンになっているのを確認してください。
　グリーンマークではなく(でしたら 項目「APIキー」をクリックしてやり直してください。)

以上で認証情報の設定は終了です。
続いて 請求先情報の紐づけ をします。

　

スポンサードリンク



　

請求先情報の紐づけ

APIキーが正しく作られていても請求先情報の紐づけができていないと Googlemaps は正常に表示されません。

左上の「三(メニューボタン)」をクリックして「お支払い」をクリック、先へ進んでクレジットカード情報を登録してください。
※登録した請求先アカウントでは予算とアラートの設定ができますので確認してください。

【参考】
料金とプラン  |  Google Maps Platform  |  Google Cloud
https://cloud.google.com/maps-platform/pricing

請求アクセス制御の概要
https://cloud.google.com/billing/docs/how-to/billing-access?hl=ja

クレジットカードを使いたくない場合

法人カードが無い・請求書が必要・銀行振り込みにしたい等でクレジットカードを使いたくない場合は、
Google Maps Platform の法人向けサービスを行っているところが 何社かありますので問い合わせてみてください。

例えばこちら
Google Maps Platformの支払い方法 – 株式会社ゼンリンデータコム
https://www.zenrin-datacom.net/business/gmapsapi/payment/index.html

Google Maps Platform｜日立ソリューションズ『Google Maps Platform』のシステム、サービス概要・価格や、解決出来る課題をご紹介
https://www.hitachi-solutions.co.jp/googlemaps/

　
　

APIキーの確認

以上の作業でAPIキーに紐づく「請求先」「APIライブラリ」「HTTPリファラー」を設定できましたでしょうか。
Google Mapsが表示されない場合はどれかが足りないか設定していないかになります。

　
　

途中で閉じちゃった場合(再開)

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

右上の「Console」をクリックしてください。

　
まず上のプロジェクトを確認してください。
もし、違うプロジェクトになっている場合は上の▼をクリックして 目的のプロジェクト(ここでは「My Project Test」)に変更します。

「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を書き込まれていても これが最終読込でマップが表示されるようになります。
※内部的には２重読込してますよとエラーはでますが、、

不動産プラグインの場合

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

　

スポンサードリンク



　

うまく表示できましたでしょうか?

ぜんぜんダメな例

こんな表示が出たら APIキー の設定ミスかコピペミスの可能性がありますので 確認してください。

おしい例

こんな表示が出たら APIキー の何かが足りません 確認してください。

Google Chromeでは簡単にどのエラーが出ているか確認する事ができます。
Google Chrome のデベロッパーツール(F12起動)の「コンソール」タブでエラー内容を確認してみましょう。

エラー例
「Directions Service: This API project is not authorized」Directions APIがありません
「Geocoding Service: This API project is not authorized」Geocoding APIがありません
「Maps Elevation Service: This API project is not authorized」Maps Elevation APIがありません
「You must enable Billing on the Google Cloud Project at」請求先情報がありません




スポンサードリンク