Google Maps APIキーを取得する方法

WEB担当者のつぶやき, リブロからのお知らせ

コラム「GoogleMapの有料化とよくある質問」でも書きましたが、2018年7月中旬頃にGoogle社の仕様変更により、GoogleMapを表示させるためにGoogleAPIキーが必須となりました。
さらに従量課金制へと変更され、従来無償で利用できていたGoogleマップが、サイトの閲覧数やマップの呼び出し数によって料金が発生する仕様となりました。
※料金についてや、よくある質問についてはコラムも併せてご覧ください。

今回は、Google Maps APIキーの取得方法とその手順について詳しく解説します。

Google Map APIキーがないとどうなる?

GoogleAPIキーがないとエラーが発生し、Googleマップが正しく読み込まれません。

正しい地図の表示

正しい地図

地図のエラー表示

地図のエラー

GoogleAPIを取得する方法

Google Cloud PlatformにGoogleアカウントでログイン

URL:https://console.cloud.google.com/

利用規約に同意してGoogle Cloud Platformの利用をスタート

API取得1

ページ上部の「無料トライアル」と表示されている右に表示される「有効化」をクリック

「無料トライアルに登録」というボタンが出ている場合もあります。
API取得1
※無料トライアルは300ドル分利用する、または有効にしてから12ヶ月経過するまで該当のアカウントに適用されます。
※「有効化」へ切り替えた翌月より、毎月200ドルの無料枠が付与されます。

また、以下のように表示されている場合もあります。
API取得1

ステップ1/2の項目を入力し、「同意して続行」をクリック

API取得ステップ1

ステップ2/2の項目を入力し、「無料トライアルを開始」をクリック

API取得ステップ2

無料トライアル申し込み完了

※クレジットカード登録後、200円の請求がある場合があります。これはGoogleによる「カードの有効性確認」によるもので、おおよそ20分前後で返金されます。
APIステップ3

一度ホームに戻ります

APIステップ4

ページ上部に出てくるアップグレードの案内をクリック

APIステップ5

アカウントのアップグレードから「アップグレード」をクリックで完了

※アップグレードをしても、無料トライアル期間と$300分の無料クレジットは引き継がれます。
※無料クレジットは$300を使い切るか、12ヶ月経過すると期限切れとなります。
APIステップ6

アカウントのアップグレードが出てこない!!

メニューから「お支払い」へ移動
左側のメニュー枠にアップグレードのお知らせが表示されているかと思います。
ご確認ください。

APIキーを発行する前に「プロジェクト」を作成する。

「プロジェクトの選択」プルダウンをクリック。

APIステップ7

プロジェクトの選択ウインドウで、右上の「新しいプロジェクト」をクリック。

APIステップ8

プロジェクト名を任意で変更し「作成」をクリック

※どのサイトで使う、どんな用途であるなど分かりやすい名前にしておきましょう。
APIステップ9

画面左側にある「≡」よりナビゲーションメニューを開く

開いたナビゲーションメニューより「APIとサービス」を選択。

※選択肢の中から「ダッシュボード」を選びます。
APIステップ10
APIステップ11

「APIとサービスの有効化」をクリック

APIステップ12

「マップ」枠の「すべて表示」をクリックして表示させる

APIステップ13

以下の3つを有効化する必要があるため、まずはどれか1つを選びます。

Maps JavaScript API

※マーカや吹き出しを表示させたりする役割があります

Geocoding API

※住所から緯度経度に変換する役割があります。
 マップの移動、マーカーを地図に立てたりする時に用います。

Maps Static API

※地図を画像として表現するために用いられます

APIステップ14

「有効にする」をクリック

※下の図では、まず「Maps JavaScript API」を有効にしました。
APIステップ15

残る2つのAPIを有効にするため左メニューから「API」をクリックします

APIステップ16

「その他のAPI」から残り2つを有効にする。

※先程「Maps JavaScript API」を有効にしたため、残る「Geocoding API」と「Maps Static API」を有効にします。
APIステップ17

APIキーの発行

左上の「≡」ナビゲーションメニューをクリックして、メニューを表示

開いたメニューから「APIとサービス」を選択し、「認証情報」をクリック

APIステップ18

初めてキーを発行する場合

※「認証情報を作成」をクリックし、選択肢から「APIキー」を選びます。
APIステップ19

「APIキーを作成しました」という画面が出たら、「キーを制限」をクリック

APIステップ20

APIキーの制限を設定する

APIキーが悪用されないように作動する範囲を設定します。

名前

※何に利用しているのか、分かりやすい名前が良いでしょう。

アプリケーションの制限

「HTTPリファラー」を選択します

リクエストを受け入れる

※APIキーを利用するドメインを設定します。貴社のドメインを以下のように入力して下さい。

  1. ドメイン名/*
  2. *.ドメイン名/*

例)ドメインが「test.net」の場合は以下(例えばURLがhttps://test.net/の場合)
1)test.net/*
2)*.test.net/*

APIステップ21

発行したAPIキーを確認

認証情報より、発行したAPIキーを確認することができます。
APIステップ22

発行したAPIキーについて

発行したAPIキーはサイトの管理画面に入力するなどして利用することとなります。
また、予想外の場所で利用していたり悪用されることが無いように設置するドメインでのみ利用できるように制限はしっかりかけておきましょう。

よくある質問についてはこちら

The following two tabs change content below.
ReBlo.jp

ReBlo.jp

不動産専用ホームページ作成サービス「リブロ」は、貴社専用の不動産ホームページを短期間で作れる新しいサービスです。リーズナブルな料金で高機能なリブロなら「こんなサイトが作りたかった」を実現させます。

リブロの活用、コンテンツ作成についてのご相談を受け付けています


WEB・SEO・コンテンツについて相談する

The following two tabs change content below.
ReBlo.jp

ReBlo.jp

不動産専用ホームページ作成サービス「リブロ」は、貴社専用の不動産ホームページを短期間で作れる新しいサービスです。リーズナブルな料金で高機能なリブロなら「こんなサイトが作りたかった」を実現させます。

関連記事一覧

カテゴリー

アーカイブ