閉じる

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. SSH接続で使える初心者のためのUnix/Linuxコマンド

  2. Googleアナリティクスで閲覧ユーザーでも他のユーザーが確認で…

  3. chrome hosts

    Chromeでhosts設定を行える拡張機能

  4. WEBサイトの作成で利用できる2019年小規模事業者持続化補助金…

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

  6. FLEXBOX RESET

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

ピックアップ記事

ページ上部へ戻る