Google Maps Platform

APIキーの取得・設定

Google Maps Platformの利用に必要な、アカウント作成からAPIの有効化、
Google Maps Platform APIキーの取得・発行、APIキーの指定までの手順についてご案内します。

Google Maps Platform資料ダウンロード

APIキーの設定手順

①Googleアカウントとプロジェクトの作成

Google APIコンソールにてAPIキーを作成する場合、Googleアカウントにて作成を行います。Googleアカウントをお持ちでない場合はGoogleアカウントの作成を行う必要がございます。
STEP 1
※画像クリックで拡大
下記のページを参考にGoogeアカウントの作成を行ってください。
STEP 2
※画像クリックで拡大
下記のページなどから、Googleアカウントでログインを行ってください。
STEP 3
※画像クリックで拡大
下記のページに接続し、「プロジェクトの選択」をクリックしてください。
STEP 4
※画像クリックで拡大
プロジェクト選択画面の「新しいプロジェクト」をクリックしてください。
STEP 5
※画像クリックで拡大
プロジェクト名を入力して「作成」ボタンをクリックしてください。

②APIの有効化

STEP 1
※画像クリックで拡大
作成したプロジェクトが選択されていることを確認し、「APIとサービス」メニューをクリックする。
STEP 2
※画像クリックで拡大
「APIとサービスの有効化」リンクをクリックする。
STEP 3
※画像クリックで拡大
利用したいAPIを選択して、「有効にする」ボタンをクリックする。
STEP 4
※画像クリックで拡大
ダッシュボードに有効化したAPIが表示されていることを確認する。他に利用したいAPIがある場合は「STEP2」と「STEP3」の手順を繰り返す。

③APIキーの作成

STEP 1
※画像クリックで拡大
「認証情報」リンクをクリックして、「認証情報を作成」メニューから「APIキー」を選択します。
STEP 2
※画像クリックで拡大
この時点でAPIキーは作成がされますが、セキュリティの強化のため「キーを制限」設定を行ってください。
STEP 3
※画像クリックで拡大
キーを利用するAPIに適したキーの制限を行います。
キーの制限を行わずにAPIキーを利用した場合、外部にキー情報が洩れると悪意のあるユーザに利用されてしまう恐れがあるのでご注意下さい。
下記から適切な制限を選択して設定を保存して下さい。

 HTTPリファラー(ウェブサイト)

HTTPリファラーによる制限
 IPアドレス(ウェブサーバー、crronジョブなど)

IPアドレスによる制限

 Androidアプリ パッケージ名およびフィンガープリントによる制限
 iOSアプリ iOSハンドル識別子による制限 

④APIキーの指定

作成したAPIキーを各APIに指定します。

例:Javascript API

<script async defer src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>

例:Geocoding API

https://maps.googleapis.com/maps/api/geocode/json?
address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY

⑤APIキーの設定確認

APIキーの設定確認はGoogle Chrome(ブラウザ)を使用して行います。
STEP 1
※画像クリックで拡大
Google Chromeの拡張機能である
の画面を開き、右上の青い「CHROMEに追加」ボタンをクリックします。
STEP 2
※画像クリックで拡大
ボタンが緑色の「CHROMEに追加済み」に変わっていれば追加完了です。
STEP 3
※画像クリックで拡大
Google Chromeで確認したいページを開き、画面右上のピンの色を確認してください。ピンの色によってAPIキーの設定状況が異なります。
緑ピン 緑のピン: API Keyが登録・設定されています。
赤ピン 赤のピン:

API Keyの設定が行われていない可能性が

ございます。

グレーピングレーピン

グレーのピン:

Google Maps APIが利用されていません。

サービス詳細、導入についてお気軽にお問い合わせください。

\ 導入効果がわかる /
\ ご相談はこちらから/