Google Maps APIを使ってみた①【2019年版】

Google Maps APIって何?

「Google Maps API」とは、Google社が提供している高機能で世界中の地図データを扱っているGoogleマップを、さまざまなサービスで利用できるようにしたものです。
AndroidやiOS向けアプリやWebサービスにGoogleマップを使用することができます。

ハツネ
ハツネ
今回の目的は、このGoogle Maps APIを利用してホームページ上にGoogleマップを表示する事になりますね。

2016年6月22日より新規のWebサイトでGoogleマップを使用する場合、「Google Maps API」で使用するAPIキーが必要になりました。

ですから手順としては、「Google Maps API」で使用するAPIキーの取得から始めましょう。

ハカセ
ハカセ
Googleのサービスを利用するのにはGoogleアカウントが必要となるので先に準備しておくと良いと思うぞ。

Google Maps APIの有効化

まずは、Google Cloud Platformのページを開き、左上のプロジェクトの選択▼をクリックします。

次の画面が表示されるので、右上の新しいプロジェクトをクリック。

するとプロジェクトの新規作成画面に移行しますので、

プロジェクト名を任意で入力してから、作成ボタンをクリックしましょう。

 

プロジェクトの作成が完了すると下の画面のように、プロジェクト名、プロジェクトIDが表示されるハズです。

 

プロジェクトの作成が完了したので、次はAPIを有効化します。

左にあるメニューからAPIとサービス>ライブラリを開いてください。

 

真ん中に検索窓があるので、検索窓に Maps JavaScript API と入力します。

 

何件かヒットしますが、Maps JavaScript APIをクリックしましょう。

 

下の画面が表示されるので、有効にするのボタンをクリック。

以上でAPIの有効化が出来ました。

ただ、実際に必要なのはAPIキーになりますので、続いてAPIキーを作成しましょう。

 

Google Maps APIキーの作成

APIの有効化後、下の画面が表示されるので、

認証情報をクリックしてください。

次の画面に移行したら、認証情報を作成▼のボタンをクリック。

下のメニューが表示されるので、1番上のAPIキーをクリックします。

「APIキーを作成しました」と表示され、APIキー作成は完了しました。

自分のAPIキーの文字列をコピーして、何処かに残して置きましょう。後で必要になります。

 

右下のキーを制限をクリックするとAPIキーの制限の設定画面になりますが、

今はキー制限を設定しません。APIキーが使えるか確認した後で設定しましょう。

そのままの設定で保存ボタンをクリック。

 

保存後、下の画面が表示されます。ここにもキーの文字列が表示されるので、キーを忘れてしまった場合はこちらからも確認できますね。

ハツネ
ハツネ
以上でGoogle Maps APIキーの取得が出来ました。ご苦労様でした。
ハツネ
ハツネ
次回はこのAPIキーを使って、ホームページ上にGoogleマップを表示します。どうぞよろしくお願いします。😁