閉じる

GOOGLE MAPのカスタマイズに必要なAPIキーの取得

本ページはプロモーション・広告が含まれています。

GOOGLE MAPをカスタマイズするにはAPIが必要ですが、2016年6月より、APIキーの取得が必要になりました。

ホームページの中で、GOOGLE MAPの背景色の変更や複数のマ―カーの設置などを行う場合、まずはAPIキーを取得しましょう。

GOOGLE Maps JavaScript APIページでAPIを取得する

Maps JavaScript API

まずは、下記のGOOGLE Maps JavaScript APIページにアクセスします。
https://developers.google.com/maps/documentation/javascript/

※GOOGLEにログインしていない場合はログインします。

キーの取得

GOOGLE Maps JavaScript APIページが開いたら、キーの取得をクリックします。

価格とプランについても一度目を通すと良いでしょう。
1 日あたり 25,000 回のマップロードまでは無料です。
https://developers.google.com/maps/pricing-and-plans/#details

Select or create project

「Select or create project」のプルダウンをクリックして、「Create a new project」を選択します。

 

My Project

My Projectの部分を自分で管理しやすい名称に変更します。

 

利用規約

初めての場合、APIの利用規約について表示されます。
「I agree that my use of any services and related APIs is subject to compliance with the applicable Terms of Service. 」
利用規約を確認し、問題なければ、「Yes」を選択して「CREATTE AND ENABLE API」をクリックします。

 

API KEY

API KEYが発行されました。

簡単ですが、これで終わりではありません。使用するサイトの登録を行います。

キーの制限(使用サイトの制限)

API KEYの制限をしていないと他サイトでも使用可能になってしまいます。

それを防ぐために、必ずMAPを表示するサイトを登録しましょう。

「API Console」をクリック

キーの制限は、「API Console」から行います。

API Consoleをクリックすると設定画面にいきます。

あとからでも設定可能です。

HTTPリファラーの設定

HTTP

WEBサイトで使用する場合は、HTTPリファラー(ウエブサイト)を選択します。

サイトの設定

設定例を元にサイトを登録します。

*.example.com/*

当サイトの場合は、

*.beginnerweb.net/*

となります。

入力したら、保存を押して完了です。

GOOGLE Mapが表示されない

カスタマイズしたGOOGLE Mapが表示されない場合は、まずはAPIの入力間違いなどを確認しましょう。

APIを設定して間もない場合も表示されません。通常10分程度で表示されますが、1時間後に確認してみてください。

それでも、表示されない場合は、HTTPリファラーのURLの確認を確認しましょう。

GOOGLE MAP APIキーを発行できない場合

プロジェクトがいっぱい、制限数に達すると、GOOGLE APIのキーが作成できない場合があります。

プランを変更するか別アカウントで登録する事もできますが、

もちろん、プロジェクトを削除する事で追加できます。

プロジェクトの削除

API Consoleメニュー

プロジェクトの削除を削除するには、API Console画面からメニューをクリックします。

次に、AIMと管理者の中から「リソースの管理」を選択します。

削除

削除したいプロジェクトを選択して、削除ボタンをクリックします。

プロジェクト削除

プロジェクト IDを入力すると削除できます。

プロジェクトを削除すると、GOOGLEAPIが使用できなくなりますので、削除前に確認をしましょう。

関連記事

  1. GOOGLE

    日本のHTTPSサイトが、昨年より31%から55%に増えていると…

  2. Instagram(インスタグラム)のアクセストークン、APIが…

  3. FLEXBOX RESET

    floatやflexbox(display:flex)のリセット…

  4. Google Assistantが音楽検索機能を実装したとか(ア…

  5. リモート

    「~接続リクエストに応答しません」Chrome リモートデスクト…

  6. Google Maps ApiからGoogle Maps Pla…

ピックアップ記事

  1. reCAPTCHA
  2. 日本語設定
ページ上部へ戻る