← プロフィールへ戻る|ヘルプ

Google Maps APIキーの取得方法

ロジマガで地図・StreetView機能を使うには、Google Maps APIキーの設定が必要です。 このページでは、キーの取得から設定までの手順を順番に説明します。

Google Maps Platform を利用するには、Google Cloud のプロジェクトを作成し、 請求先アカウントを有効にして、必要なAPIを有効化したうえでAPIキーを作成します。

事前に用意するもの

  • Googleアカウント　—　Gmailなどで使っているアカウント
  • クレジットカード等の支払い方法　—　請求先アカウントの設定に必要（通常費用は発生しません）

Google Maps Platformは月$200相当の無料枠があります。個人利用の範囲であれば通常は費用が発生しません。 ただし、料金体系は変更される可能性があるため、最新情報はGoogle Maps Platform 料金ページでご確認ください。

1Google Maps Platform にアクセスする

1
Google Maps Platform のスタートガイドページを開きます。
2
ページ内の 「使ってみる」 または 「Get Started」 をクリックします。
Google Maps Platform — 右上ナビの「使ってみる」ボタン（赤枠）

2Googleアカウントでログインする

Googleアカウントにログインしていない場合は、ログイン画面が表示されます。 普段使っているGoogleアカウントでログインしてください。

3Google Cloud プロジェクトを作成する

Google Maps APIキーは、Google Cloud の「プロジェクト」に紐づいて作成されます。 プロジェクトとは、APIキーや課金をまとめて管理するための単位です。

1
プロジェクト作成画面が表示されたら、分かりやすい名前を入力します。
2
名前を入力したら 「作成」 をクリックします。

プロジェクト名の例

ロジマガ用 Google Maps API

自分の名前 Maps API

4請求先アカウントを設定する

Google Maps Platform を利用するには、請求先アカウントの設定が必要です。 画面の案内に従って、請求先アカウントを作成し、支払い方法を登録してください。

個人利用の範囲では、月$200の無料枠内に収まることがほとんどです。 念のためCloud Consoleで「予算アラート」を設定しておくと、万が一のときにメール通知を受け取れます。

新しい請求先アカウントの作成 — 名前・国・通貨の入力フォーム

5必要なAPIを有効にする

次に、利用するAPIを有効化します。Google Cloud Console の検索欄またはメニューから操作します。

1
画面左側のメニューから 「APIとサービス」→「ライブラリ」 を開きます。
2
検索欄に 「Maps JavaScript API」 と入力します。
3
検索結果から「Maps JavaScript API」のカードを選択し、「有効にする」 をクリックします。

ロジマガで必要なAPI

Maps JavaScript API　— ブラウザ上でインタラクティブな地図とStreetViewを表示するためのAPIです。 ロジマガの地図機能・StreetView機能はこのAPIを使っています。

Street View Static API（任意）　— 静的なStreetView画像を表示する際に追加で必要になる場合があります。 迷った場合はMaps JavaScript APIのみ有効にしてください。

左メニュー — APIとサービス→ライブラリ（赤枠）
APIライブラリ検索結果 — Maps JavaScript APIカード（赤枠）
Maps JavaScript API 詳細 — 有効にするボタン（赤枠）

6APIキーを作成する

1
Google Cloud Console で 「APIとサービス」→「認証情報」 を開きます。
2
画面上部の 「認証情報を作成」 をクリックし、表示されたメニューから 「APIキー」 を選択します。
3
AIzaSy... で始まるAPIキーが生成されます。

この時点でAPIキーは作成されていますが、まだそのまま使わないでください。次のステップでキーに制限をかけてから使います。

左メニュー — 認証情報（赤枠）
認証情報を作成 ドロップダウン — APIキー選択肢（赤枠）
APIキー作成パネル — 名前・API制限を設定
作成されたAPIキー ダイアログ（APIキーは非表示）

7APIキーに制限をかける

制限のないAPIキーは、キーを知っている人が誰でもどこからでも使えてしまいます。 不正利用を防ぐため、必ず以下の制限を設定してください。

1
作成したAPIキーの編集画面を開きます（認証情報の一覧でAPIキー名をクリック）。

7-1. アプリケーションの制限

1
「アプリケーションの制限」で 「ウェブサイト」 を選択します。
2
APIキーの使用を許可するURL（ロジマガのドメイン）を入力します。

https://rojimaga.com/*

ロジマガはwwwなしの https://rojimaga.com/* のみ登録してください。

ウェブサイト制限 — ラジオボタン選択とURL入力フォーム（赤枠）
URLが追加された後の一覧（入力したドメインが表示される）

7-2. APIの制限

1
「APIの制限」で 「キーを制限」 を選択します。
2
ドロップダウンから Maps JavaScript API（と、有効にした場合は Street View Static API）を選択します。
3
「保存」 をクリックして設定を確定します。
API制限 — Maps JavaScript APIにチェック（赤枠）

8APIキーをコピーしてロジマガに設定する

1
制限の設定が終わったら、APIキーをコピーします。
2
ロジマガのプロフィールページを開き、「Google Maps APIキー設定」欄にコピーしたキーを貼り付けて 「保存」 をクリックします。

設定後は一度サインアウト→再サインインすると確実に反映されます。

APIキー編集ページ（APIキーは非表示）
ロジマガ プロフィールページ — APIキー入力欄（赤枠）

9動作確認する

APIキーを設定したら、実際に地図やStreetViewが表示されるか確認します。 ロジマガの地点作成画面や編集画面を開いて、地図が正常に表示されれば設定完了です。

うまく表示されない場合の確認リスト

□請求先アカウントが有効になっているか
□Maps JavaScript API が有効になっているか
□APIキーのウェブサイト制限に、正しいURLを登録しているか
□http と https を間違えていないか
□www あり・なし、両方のURLを登録しているか
□APIの制限で、Maps JavaScript API を選択しているか

地図に「for development purposes only」の透かしが表示される場合は、 通常APIキーまたは請求先アカウントの設定に問題があります。上のリストを確認してください。

よくある質問

Q. クレジットカードの登録は必須ですか？

Google Maps Platform を利用するには、請求先アカウントが有効なGoogle Cloudプロジェクトが必要です。 無料枠の範囲に収まる場合でも、請求先の設定は必要です。

ただし、個人利用の範囲であれば月$200の無料枠内に収まることがほとんどで、 実際に請求が発生するケースはまれです。

Q. APIキーは他人に見せてもいいですか？

APIキーそのものを他人に教えることは避けてください。 スクリーンショットや動画にAPIキーが写らないよう注意が必要です。

万が一キーが見られても悪用されにくくするため、必ず ウェブサイト制限 と API制限 を設定してください。

Q. どのAPIを有効にすればいいですか？

ロジマガの地図・StreetView機能には Maps JavaScript API を有効にしてください。 Street View は Maps JavaScript API に含まれています。

迷った場合はMaps JavaScript APIのみで問題ありません。

Q. 地図が表示されません。

以下を順番に確認してください。

  • 請求先アカウントが有効か
  • APIキーをプロフィールページに正しく貼り付け・保存したか
  • Maps JavaScript API を有効にしたか
  • APIキーのウェブサイト制限に、ロジマガのURLを登録したか
  • API制限で Maps JavaScript API を許可しているか

特に多いのは、https://example.com/* と https://www.example.com/* の片方しか登録していないケースです。 両方登録してください。

← プロフィールページでAPIキーを設定する