Google Maps Platform APIキーの取得方法について解説します。TCDテーマのGoogleマップ表示機能を使用される方は、こちらのAPIキーが必要になりますので、当記事を参考に取得してください。
Google Maps Platform APIについて
Webサイトやアプリ上でGoogleマップの機能を利用できるAPIです。Google Maps Platformには様々なAPIが用意されており、これらを活用することで、マップを自由にカスタマイズできるようになります。
ただし、2018年7月16日から料金体系が変わり、月間28,000回のマップロードまで無償、超過分は有償になりました。詳細な料金については、Google Maps Platformの料金表をご覧ください。
なお、超過分の費用を抑えたい方は、下記より使用量の上限を設定することも可能です。
Google Maps Platform APIキーの取得手順
それでは、Google Maps Platformの利用に必要なAPIキーの取得方法についてご紹介します。下記の手順を順番に進めてください。
Googleアカウントの作成
Googleアカウントをお持ちでない方は、Googleアカウントの作成を行う必要があります。下記のページを参考にGoogeアカウントの作成を行ってください。（既にお持ちの場合は、次のプロジェクト作成にお進みください。）
Google Cloud Platformにてプロジェクトの作成
Googleアカウントをお持ちの方は、最初にGoogle Cloud Platformでプロジェクトを作成します。下記よりアクセスして「プロジェクトの選択」を押してください。
プロジェクト選択画面の「新しいプロジェクト」をクリックします。
プロジェクト名を入力して「作成」ボタンをクリックしてください。これでプロジェクトを作成できました。
プロジェクト名には、Googleマップを表示する予定のWebサイトやドメイン等の名前を入力しておくと後で管理しやすいです。例）tcd-theme
使用するAPIの有効化
次に使用するAPIを選択して有効化していきます。
画面左上で作成したプロジェクト（例：tcd-theme）が選択されているか確認した後、ナビゲーションメニューの「APIとサービス」を押します。
次に「APIとサービスの有効化」を押します。
様々なAPIが一覧で表示されるライブラリに移動するので、使用するAPIを選択します。今回は、TCDテーマをお使いのユーザー向けに下記2つのAPIを有効化します。
| Maps JavaScript API | 地図のデザインをカスタマイズできる |
| Geocoding API | 住所を緯度・軽度の座標に置き換える |
まずは、ライブラリの画面に表示されているMaps JavaScript APIを選択します。（下記の画面に表示されていない場合は、画面上部の検索フォームから探しましょう。）
「有効にする」を押します。これで「Maps JavaScript API」を有効化できました。
有効化した後は下記の画面に移動しますので、その他のAPI内に存在する「Geocoding API」をクリックします。
「有効にする」を押します。これでTCDテーマのデザインされたGoogleマップを表示するのに必要な2つのAPIを有効化できました。
念のため、最後に2つのAPIキーが有効化されているか確認しましょう。有効化されたAPIキーは「有効なAPI」の一覧に表示されます。
他に利用したいAPIがある場合は前の手順を繰り返しましょう。
APIキーの作成
次は先程有効化したAPIをサイトと連動させるために必要なAPIキーを作成します。「認証情報」をクリックします。
画面上部の「認証情報を作成」を押した後、「APIキー」をクリックしてください。この時、「認証情報を作成」の左横にあるセレクトボックスで「すべてのGoogle Maps Platfform API」を選択しているかご確認ください。
これでAPIキーを作成できましたが、このままでは第三者に不正利用される恐れがあります。これらを防ぐため、「キーの制限」を押して、利用範囲を制限します。
APIキーの利用範囲を制限する
APIキーは下記2つの方法で利用範囲を制限できます。
どちらも必要な設定ですので、必ず設定してください。
アプリケーションの制限
IPアドレスや識別番号によって利用反映を制限できます。WordPress等を使用してウェブサイトを運営されている場合は、「HTTPリファラー（ウェブサイト）」を選択して、新しいアイテムの項目を入力します。
この時URLをそのまま入力してしまうと、そのURLでしかAPIを利用できません。基本的には、運営するサイト内のページで有効化することが多いので、URLの最後に「*」をつけるとよいでしょう。
https://tcd-theme.comの場合
ドメインの配下階層全てにおいてAPI使用を許可：https://tcd-theme.com/*
APIの制限
ウェブサイトの制限を下にスクロールすると、APIの制限項目があります。ここで「キーを制限」を押し、有効化したAPI全てを選択し、「保存」を押します。ここで選択されていないAPIは利用できなくなりますので、ご注意ください。
TCDテーマをご利用の場合は、「Maps JavaScript API」と「Geocoding API」の両方を選択しているか必ずご確認ください。
支払い情報の登録
請求情報の登録を行います。無償枠を超えた場合自動で従量課金に移行するため、事前に請求情報の登録が必要となります。ナビゲーションメニューから「お支払い」をクリックします。
「請求先アカウントをリンク」を押した後、「請求先アカウントを作成」をクリックします。これより、支払い用のアカウントを作成していきます。
利用規約にチェックを入れて、「続行」をクリックします。
電話番号を入力して「コードを送信」を押し、携帯端末に届いた6桁のコードを入力して認証します。
最後に各項目を埋めて「無料トライアルを開始」を押すと、支払いアカウントを作成できました。
これでGoogle Maps Platform APIキー取得の一連の手順が終了しました。
使用量の上限を設定する
Google Maps Platform APIを使用する場合、月間で無料利用できる量が決まっています。運営しているサイトのアクセス数が多い場合は、使用量の上限を設定しておくことで、超過分の費用が請求されるのを防ぐことができます。
上限を設定される場合は下記を参考に設定してください。
参考：使用量が予想外に増加して多額の料金が請求されないようにするには、どうすればよいですか？
なお、上限を超えると、マップが正常に表示されなくなります。無料かつ制限無しでマップを表示したい方は、下記の方法で埋め込むことを検討してもいいですね。
会社や店舗等の所在地を表示するのにGoogleマップを埋め込んでいるWebサイトって多いですよね。Googleマップは無料かつ少しの作業でサイト上に表示できます。 当記事では、下記のようなGoogleマップをWordPressサイトに埋め込む方法について解説します。 Google...
APIキーを使ってマップを表示する
それでは取得したAPIキーを使ってマップを表示しましょう。今回は、「SOLARIS」を例にデザインされたGoogleマップを表示していきます。
TCDテーマオプション > クイックタグ > Googleマップの設定を開き、取得したAPIキーを入力して保存します。（各オプションでデザインを調整してください。）
その後、エディタでショートコードを挿入して、住所を入力するとGoogleマップを表示できます。
テーマによってGoogleマップの設定の箇所は異なりますので、設定方法は各テーマに付属するマニュアルをご覧ください。
マップが表示されないときは
APIキーの取得手順に誤りがある可能性が高いです。下記の設定を正常に行っているかご確認いただいた後、再度表示をご覧ください。
- 必要なAPIを有効化していない
- APIキーの制限に誤りがある
- 支払い情報の登録ができていない
必要なAPIを有効化していない
TCDテーマをお使いの方は、「Maps JavaScript API」と「Geocoding API」が有効化されているかご確認ください。両方とも有効化していないとマップは表示されません。有効化の方法は、使用するAPIの有効化をご覧ください。
APIキーの制限に誤りがある
アプリケーションの制限やAPIの制限で設定に誤りがないかご確認ください。設定方法はAPIキーの利用範囲を制限するをご覧ください。
請求先情報を登録していない
Googleマップを表示させるためには、請求先アカウントの登録が必須です。支払い情報の登録を参考に住所やお支払い情報の登録がお済みかどうかご確認ください。
まとめ
Google Maps Platform APIキーの取得方法について解説しました。APIキーの取得手順に関する質問は、弊社に寄せられるお問合わせの中でも多い方です。うまく動作しないときは、マップが表示されないときはをご確認ください。
なお、上記を試してもマップが表示されないときは、Google Maps Platform公式のサポートがありますので、こちらを利用することで、的確なアドバイスをもらえるかもしれません。
また、今回の記事を動画にしました。よろしければご参照ください。
