unrealMan’s blog

IT関連の奮闘記を備忘録がてら記載していきます!

【Google Maps API】マップを表示してみた(其の①)【APIキー取得】

1.Google Maps APIとは

Googleが提供している地図サービスGoogleマップをカスタマイズしてWeb ページに表示させることができます。
好きなマーカーを表示させたり、ルート検索を行ったりと様々なAPIが提供されています。

2.Google Maps API キーの取得

以下の手順で、APIキーを取得する必要があります。

Googleアカウントの作成

まずは、Googleアカウントを作成しておきましょう。
(作成方法は割愛します)

Google Cloud Platformへアクセス

console.cloud.google.com
f:id:unrealman:20191129000454j:plain

・プロジェクト作成

「プロジェクトの選択」を押下
f:id:unrealman:20191129000711j:plain
「新しいプロジェクト」を押下
f:id:unrealman:20191129000822j:plain
プロジェクト名に任意の名称を入力し、「作成」を押下
f:id:unrealman:20191129001159j:plain
ダッシュボードに戻るので、作成が完了したら「プロジェクトの選択」を押下
f:id:unrealman:20191129001409j:plain
先ほど作成したmapsプロジェクトが出来ているので押下
f:id:unrealman:20191129001551j:plain
ダッシュボード画面でmapsプロジェクトに切り替わった
f:id:unrealman:20191129001725j:plain

・「Maps JavaScript API」の有効化

APIとサービス」-「ライブラリ」を押下
f:id:unrealman:20191129002044j:plain
"maps javascript api"で検索し、Maps JavaScript APIを選択
f:id:unrealman:20191129002305j:plain
「有効にする」を押下
f:id:unrealman:20191129002450j:plain

Google Maps API キーの取得

「認証情報」を押下
f:id:unrealman:20191129002624j:plain
APIとサービスの認証情報を押下」
f:id:unrealman:20191129002736j:plain
「認証情報を作成」-「APIキー」を押下
f:id:unrealman:20191129002909j:plain
APIキーが取得できました
f:id:unrealman:20191129003330j:plain

今回はAPIキー取得までです。
次回このAPIキーを使ってGoogle MAPを表示してみたいと思います。

以上です。