Google Maps Platform(グーグルマップ)の導入方法(準備編)
Google Maps(グーグルマップ)をサイトに導入する際、前準備が必要となります。その手順を説明したいと思います。
なお、実際のHTML/Javascriptを使って、グーグルマップを設定する方法については、『Google Maps(グーグルマップ)の設定の仕方』をご覧ください。
また、その他、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。
![]() |
![](https://www11.a8.net/0.gif?a8mat=3BSYLH+BB8IK2+249K+BWGDT)
Contents
Google Maps Platform(グーグルマップ)の導入方法(準備編)
以下のページには準備方法が4つのステップで記載されています。その内容に沿いながら、説明していきます。
請求アカウントの作成
Google Cloud Console
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_121447.png)
まず、Google Cloud Console画面を開きましょう。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_122026-1024x638.png)
利用規約に同意し「同意して続行」を押しましょう。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_123242-1024x636.png)
次に左メニューから「お支払い」を選択します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_123434-1024x405.png)
ここで請求先情報を登録します。まずは「請求先アカウントを追加」を選択してください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_133312.png)
利用規約をチェックして「続行」を押してください。
なおここに書かれている通り、300ドル分の利用が無料で利用できます。詳細はまた別途説明いたします。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_133821-1024x680.png)
ここで、請求情報を登録します。クレジットカード番号を登録しないといけません。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_134339-1024x764.png)
クレジットカード番号と住所を入力し、「無料トライアルを開始」を押します。
なお、VISAプリペイドカードでは、だめでしたが、VISAのデビットカードでは受け付けれくれました。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_135448-1024x637.png)
請求情報の登録が完了すると、上のような画面になります。
プロジェクトの作成
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_140218.png)
ステップ1と同じで、これまた「Google Cloud Console」を開きます。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_140541-1024x720.png)
まずプロジェクトを作成しないといけないので、画面の上部の「My First Project」を押します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_141233-1024x629.png)
すると「プロジェクトの選択」ダイアログが表示されます。ここでは新しいプロジェクトを作成したいので右上の「新しいプロジェクト」を押します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_141404.png)
まずプロジェクト名を設定してください。ここでは「Single Life Tokyo」としましょう。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_141740.png)
「作成」ボタンを押しましょう。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_142029-1024x678.png)
「作成」ボタンを押すと、プロジェクトが作成されます。
作成したプロジェクトを開いてみましょう。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_142511-1024x653.png)
プロジェクトページが表示されれば、完了です。
API/SDK有効化
ステップ3ではAPIを有効化させます。APIのライブラリページに行きましょう。
Maps API Library page
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_143922-1024x639.png)
ページを開くと有効にできるAPIの一覧が表示されます。さまざまなサービスを必要に応じて有効化してください。ここではGoogle Maps(グーグルマップ)の利用を前提として、「Maps Javascript API」を有効にしたいと思います。
まず、「Maps Javascript API」を選択してください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_144310.png)
表示された画面で「有効にする」を教えてください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_144647-1024x739.png)
有効化されると上のような画面になり、APIが有効化されます。
APIキーの取得
ステップ4ではAPIキーを取得します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_145136.png)
まず、画面下のタブで取得したAPIを選びます。ここではウェブページで表示するグーグルマップの利用を前提としているため、「Web」タブを押して、「Maps JavaScript API」のリンクをクリックします。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_150714-1024x672.png)
リンクを押すと、APIキーの取得方法の手順が書かれているページになります。
プロジェクト選択
まず、APIを取得したプロジェクトを選択します。
「Go to the project selector page」をクリックしてください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_151106-1024x348.png)
プロジェクト一覧が出てきますので、先ほどステップ2で作成したプロジェクトを選択するようにします。ここでは『Single Life Tokyo』を選択します。
「認証情報」画面
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_151714-1024x603.png)
プロジェクトのページが表示されますので、次に左メニューから「APIとサービス」→「認証情報」を選択してください。
認証情報作成
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_151923-1024x492.png)
認証情報画面で、「+認証情報を作成」を押します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_152253-1024x480.png)
「APIキー」を選択します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_152509-1024x542.png)
これでAPIキーが生成されました。
キーの制限
Googleの手順では『「閉じる」をクリック』になっていますが、ここでは、キーを制限する手順としたいと思います。ですので、「キーを制限」をクリックします。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_153528-1024x612.png)
キーに制限を加えないと、別サイトで利用されたりしてしまいます。そのため、利用する際には、キーに制限をつけることを強くお勧めします。
ここではサイト単位で制限したいと思います。
アプリケーションの制限
まず、「HTTP リファラー(ウェブサイト)」を選択してください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_154034.png)
「項目を追加」を押してください。
ウェブサイトの制限
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_154210.png)
ここにサイトアドレスを指定します。わたしのサイトのホスト名は「single-life.tokyo」なので、このサイトの範囲内で利用するには『*single-life.tokyo/*』と指定します。アスタリスクは、前方、または、後方での文字列があっても、無視するという意味です。そのためURL『https://www.single-life.tokyo/』というアドレスも対象内となり、利用可能な範囲となります。
指定の仕方については、画面上にも載っています。ご参考ください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_154507.png)
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_154832.png)
リファラーを入力し、「完了」を押してください。
API の制限
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_155259.png)
次にAPIを制限するので、「キーを制限」を選択してください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_155432.png)
次にAPIを選択します。「Select APIs」を選択してください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_155607.png)
ここでは、Google MapsのAPIの利用を前提としていますので、「Maps Javascript API」を選択します。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_155714.png)
最後に「保存」ボタンを押してください。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_160140.png)
保存が終わると、APIキーに制限が加わります。
![](https://www.single-life.tokyo/wp-content/uploads/2021/01/20210117_160222-1024x443.png)
これで、制限付きのAPIキーを取得することができました。
これで、準備完了です。実際にHTML/Javascriptを利用し、グーグルマップを導入してみてください。
導入方法につきましては、『Google Maps(グーグルマップ)の設定の仕方』をご覧ください。