閉じる

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. reCAPTCHA

    フォームの迷惑メール対策で有効なGoogle「reCAPTCHA…

  2. BlockchainをWebにどう活用するかw3cイベントで議論…

  3. css grid

    IE11に対応させる場合はCSS Grid Layoutを利用し…

  4. iphone

    【CSS】Androidのみ余白や文章の行間がせまくなる時はli…

  5. Fetch as Google

    Fetch as Google機能が3月28日で廃止

  6. サイト内検索機能で広告yahooカスタムサーチを利用する

ピックアップ記事

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