MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2018.05.07

Google Map APIs を使用するためのAPIキー取得と設定方法

みなさん、こんにちは。

Google Maps APIs を使用するためには、APIキーを取得する必要があります。以前は、APIキーを設定していなくても使用することができたのですが、2016年6月よりAPIキーが必須となりました。しかし、規約が変更される前から Google Maps APIs を使用している場合は、APIキーを指定しなくても使用できてしまうため混乱しがちですが、現在、APIキーは必須です!

 

 

また、2018年6月に登場する Google Maps Platform では、過去のプロジェクトも含め APIキーが設定されていないと、地図がグレーアウトで表示され、操作ができなくなるようです!!

 

 

 

今回は、そのAPIキーを取得する方法を細かく解説していきたいと思います。

まず、APIキーを取得するために前提になるのが、Googleアカウントが必要だということです。ここでは、Googleアカウントの作成方法は、割愛しますが、準備をお願いします。

 

 

APIキーを作成する際の大まかなフローです。

① Google Cloud Console にログイン

② プロジェクトの作成

③ 使用するAPIの有効化

④ APIキーの作成

⑤ APIキーに対して制限を追加

 

 

では、実際にAPIキーを作成してみましょう。

以前は、Google Developer Console というサイトで作成していたのですが、現在は Google Cloud Console に統一されたようです。以下のURLにアクセスしてください。

https://cloud.google.com/

 

 

APIキーはコンソールページで作成します。ページ右上の「コンソール」をクリックしてください。なお、Google アカウントでログインしていない場合は、ログイン画面が表示されますので、所有するIDとパスワードを入力しログインしてください。

 

 

 

プロジェクトの作成

無事ログインができますと、Google Cloud のコンソルーページが表示されます。

APIキーを作成するためには、まずプロジェクトを作成する必要があります。ヘッダ部の「プロジェクトを選択」をクリックしてください。

 

 

 

次に、プロジェクト選択ダイアログが表示されますので、「+」ボタンをクリックします。

 

 

 

新しいプロジェクトを作成するページが表示されます。プロジェクト名を入力し、作成ボタンをクリックしてください。

 

 

 

Google Maps JavaScript API 用のAPIキーを作成

ヘッダ部より先程作成したプロジェクトを選択すると、ダッシュボードにプロジェクトの全体の情報が表示されます。

次に、利用するGoogle Maps APIs の設定を行います。ダッシュボード内のAPIエリアにある「APIの概要に移動」をクリックしてください。

 

 

 

APIのダッシュボードが表示されます。上部に「APIとサービスの有効化」のリンクがありますので、クリックしてください。

 

 

 

APIライブラリのページが表示されます。「マップ」という項目があれば「全て表示」をクリックしてください。もし、ページ上に見当たらない場合は、検索用テキストボックスに「map」と入力し検索を行ってみてください。

 

 

 

Google Maps APIs に関連するAPIの一覧が表示されます。今回は、一番よく使われている「Google Maps JavaScript API」で使用するキーを作成していきます。

 

 

 

Google Maps JavaScript APIのページが表示されますので、ページ内の「有効にする」ボタンをクリックします。他に、使用したいAPIがある場合、同様の方法で有効にしてください。

 

 

 

これで、Google Maps JavaScript API が有効になりました。次に、APIキーを作成します。「認証情報を作成」ボタンをクリックしてください。

 

 

 

「必要な認証情報の種類を決定します」から「Google Maps JavaScript API」を選択し、「必要な認証情報」ボタンをクリックします。

 

 

 

これで、APIキーの作成が完了しました。次に、APIキーに対して「キーの制限」を設定します。制限しないと、キー情報が漏れてしまったときに悪用されてしまいますので、制限することをオススメします。

 

今回は、Google Maps JavaScript API で利用するため、アプリケーションの制限で「HTTPリファラー(ウェブサイト)」を選択し、利用するWEBサイトのURLを入力してください。

例:https://maps.multisoup.co.jp,  https://*.multisoup.co.jp, http://192.168.0.10, http://localhost

 

複数入力することも可能です。本番用、開発用など用途毎に入力しましょう。入力を終えたら「保存」ボタンをクリックしてください。

 

より安全を期するため、利用できるAPIを設定することもできます。「APIの制限」タブ開き、リストより使用を許可するAPIを選択してください。今回は「Google Maps JavaScript API」を選択しましょう。

 

 

 

以上で、作成したAPIキーに対してHTTPリファラーの制限を設定することができました。リファラーの制限をしない場合は、どのサイトからもAPIキーが利用できてしまいますが、制限した場合は、設定したURLのサイトからでしか利用できません。

 

 

 

WEBサービスAPI用のAPIキーを作成

以下のAPIは、WEBサービスAPIですので、主にサーバサイドのプログラムからHTTPリクエスストして使用します。そのため、上記で作成したAPIキーでは、HTTPリファラーの制限に引っかかり使用できません。WEBサービスAPI用に、HTTPリファラーではなく、IPアドレス制限を行うAPIキーを作成する必要があります。

 

Google Maps Geocoding API

Google Maps Distance Matrix API

Google Maps Roads API

Google Maps Time Zone API

Google Maps Geolocation API

Google Maps Directions API

Google Maps Elevation API

Google Places API Web Service

 

 

 

まず、APIライブラリより、使用するWEBサービスAPIを有効にしておいてください。

メニューより「認証情報」を選択し、「認証情報を作成」→「APIキー」をクリックします。

 

 

新しいAPIキーが作成されました。次に「キーを制限」をクリックします。

 

 

アプリケーションの制限から「IPアドレス」を選択し、APIを実行するサーバのIPアドレスを登録してください。

 

 

「APIの制限」タブより、使用するAPIを設定します。

 

 

以上で、IPアドレスで制限されたAPIキーの作成が完了しました。

認証情報の一覧に、HTTPリファラーによる制限、IPアドレスによる制限が設定されたAPIキーが2個できていることを確認しましょう。

 

 

設定方法

実際作成したAPIを設定する方法です。

 

1. Google Maps JavaScript API の場合

<script https://maps.google.com/maps/api/js?v=3&key={API_KEY}"></script>

 

2. Google Maps Geocodeing API などWEBサービスAPIの場合

https://maps.googleapis.com/maps/api/geocode/json?address=東京都千代田区神田錦町3-11&key={API_KEY}

 

 

 

まとめ

使用したい Google Maps API を利用可能に設定する。

作成した APIキーには用途に応じて制限をきちんと設定する。

・Google Maps JavaScript API: HTTPリファラー制限

・Google Mpas Geocoding API等のWEBサービスAPI: IPアドレス制限

 

 

長くなりましたが、APIキーの作成方法は以上のとおりです。

 

なお、Google Maps Platform で は、月間200ドル以上利用する場合、請求先アカウントの登録(クレジットカード)が必要になります。登録していない場合は、制限を超えたリクエストを行うとエラーとなりますので、ご注意ください!

 

不明点や疑問点があれば、問い合わせフォームよりご質問ください。

 

バイ

 

【関連記事】こんな記事も読まれています

 - Google Maps APIs, サポート, スタッフ日記, スタンダードプラン, プレミアムプラン, 問い合わせ

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)