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キーの取得方法についてご紹介します。下記の手順を順番に進めてください。

  1. Googleアカウントの作成(お持ちでない方)
  2. プロジェクトの作成
  3. 使用するAPIの有効化
  4. APIキーの作成
  5. APIキーの利用範囲を制限する
  6. 支払い情報の登録

Googleアカウントの作成

Googleアカウントをお持ちでない方は、Googleアカウントの作成を行う必要があります。下記のページを参考にGoogeアカウントの作成を行ってください。(既にお持ちの場合は、次のプロジェクト作成にお進みください。)

Googleアカウントのヘルプ

Google Cloud Platformにてプロジェクトの作成

Googleアカウントをお持ちの方は、最初にGoogle Cloud Platformでプロジェクトを作成します。下記よりアクセスして「プロジェクトの選択」を押してください。

Google Maps Platformのダッシュボード

Google Cloud Platform

プロジェクト選択画面の「新しいプロジェクト」をクリックします。

プロジェクトの選択画面

プロジェクト名を入力して「作成」ボタンをクリックしてください。これでプロジェクトを作成できました。

プロジェクトの作成画面

プロジェクト名には、Googleマップを表示する予定のWebサイトやドメイン等の名前を入力しておくと後で管理しやすいです。例)tcd-theme

使用するAPIの有効化

次に使用するAPIを選択して有効化していきます。

画面左上で作成したプロジェクト(例:tcd-theme)が選択されているか確認した後、ナビゲーションメニューの「APIとサービス」を押します。

APIとサービスを選択

次に「APIとサービスの有効化」を押します。

APIとサービスの画面

様々なAPIが一覧で表示されるライブラリに移動するので、使用するAPIを選択します。今回は、TCDテーマをお使いのユーザー向けに下記2つのAPIを有効化します。

Maps JavaScript API 地図のデザインをカスタマイズできる
Geocoding API 住所を緯度・軽度の座標に置き換える

まずは、ライブラリの画面に表示されているMaps JavaScript APIを選択します。(下記の画面に表示されていない場合は、画面上部の検索フォームから探しましょう。)

APIライブラリ

「有効にする」を押します。これで「Maps JavaScript API」を有効化できました。

Maps JavaScript API

有効化した後は下記の画面に移動しますので、その他のAPI内に存在する「Geocoding API」をクリックします。

APIの設定画面

「有効にする」を押します。これでTCDテーマのデザインされたGoogleマップを表示するのに必要な2つのAPIを有効化できました。

Geocoding APIの有効化

念のため、最後に2つのAPIキーが有効化されているか確認しましょう。有効化されたAPIキーは「有効なAPI」の一覧に表示されます。

有効なAPIを確認

他に利用したいAPIがある場合は前の手順を繰り返しましょう。

APIキーの作成

次は先程有効化したAPIをサイトと連動させるために必要なAPIキーを作成します。「認証情報」をクリックします。

認証情報を選択

画面上部の「認証情報を作成」を押した後、「APIキー」をクリックしてください。この時、「認証情報を作成」の左横にあるセレクトボックスで「すべてのGoogle Maps Platfform API」を選択しているかご確認ください。

認証情報

これでAPIキーを作成できましたが、このままでは第三者に不正利用される恐れがあります。これらを防ぐため、「キーの制限」を押して、利用範囲を制限します。

APIキーの作成完了画面

APIキーの利用範囲を制限する

APIキーは下記2つの方法で利用範囲を制限できます。

どちらも必要な設定ですので、必ず設定してください。

アプリケーションの制限

IPアドレスや識別番号によって利用反映を制限できます。WordPress等を使用してウェブサイトを運営されている場合は、「HTTPリファラー(ウェブサイト)」を選択して、新しいアイテムの項目を入力します。

APIキーのアプリケーションの制限

この時URLをそのまま入力してしまうと、そのURLでしかAPIを利用できません。基本的には、運営するサイト内のページで有効化することが多いので、URLの最後に「*」をつけるとよいでしょう。

https://tcd-theme.comの場合
ドメインの配下階層全てにおいてAPI使用を許可:https://tcd-theme.com/*

APIの制限

ウェブサイトの制限を下にスクロールすると、APIの制限項目があります。ここで「キーを制限」を押し、有効化したAPI全てを選択し、「保存」を押します。ここで選択されていないAPIは利用できなくなりますので、ご注意ください。

APIキーの制限

TCDテーマをご利用の場合は、「Maps JavaScript API」と「Geocoding API」の両方を選択しているか必ずご確認ください。

支払い情報の登録

請求情報の登録を行います。無償枠を超えた場合自動で従量課金に移行するため、事前に請求情報の登録が必要となります。ナビゲーションメニューから「お支払い」をクリックします。

サイドメニューから「お支払い」を選択

「請求先アカウントをリンク」を押した後、「請求先アカウントを作成」をクリックします。これより、支払い用のアカウントを作成していきます。

請求先アカウントの作成

利用規約にチェックを入れて、「続行」をクリックします。

アカウント情報の登録

電話番号を入力して「コードを送信」を押し、携帯端末に届いた6桁のコードを入力して認証します。

電話番号の登録

最後に各項目を埋めて「無料トライアルを開始」を押すと、支払いアカウントを作成できました。

支払い情報の確認

これでGoogle Maps Platform APIキー取得の一連の手順が終了しました。

使用量の上限を設定する

Google Maps Platform APIを使用する場合、月間で無料利用できる量が決まっています。運営しているサイトのアクセス数が多い場合は、使用量の上限を設定しておくことで、超過分の費用が請求されるのを防ぐことができます。

上限を設定される場合は下記を参考に設定してください。

参考:使用量が予想外に増加して多額の料金が請求されないようにするには、どうすればよいですか?

なお、上限を超えると、マップが正常に表示されなくなります。無料かつ制限無しでマップを表示したい方は、下記の方法で埋め込むことを検討してもいいですね。

APIキーを使ってマップを表示する

それでは取得したAPIキーを使ってマップを表示しましょう。今回は、「SOLARIS」を例にデザインされたGoogleマップを表示していきます。

TCDテーマオプション > クイックタグ > Googleマップの設定を開き、取得したAPIキーを入力して保存します。(各オプションでデザインを調整してください。)

TCDテーマオプションのGoogleマップの設定

その後、エディタでショートコードを挿入して、住所を入力するとGoogleマップを表示できます。

ショートコードで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公式のサポートがありますので、こちらを利用することで、的確なアドバイスをもらえるかもしれません。

また、今回の記事を動画にしました。よろしければご参照ください。