APIキーの取得方法
グーグルマップを利用するのに必要なAPIキーの取得方法を解説します。
重要
2017.5現在グーグルマップを利用するにはAPIキーというものが必要になります。(以前はなくても利用できたのですが・・・。)
ちなみにAPIキーがない状態でマップを表示するとこのようになります。
原因が書かれているワケではないのであせりますよね。
並びに表示回数が一定基準を超えた場合に課金もされるようになりました。
現時点(2017.5)標準の課金プランで一日25000回の表示を超過以降1000回ごとに0.5USドルの課金なので(正確ではないかもしれません)まあまあ人気のあるサイトじゃない限りは課金されなそうですが、念のためそのあたりは利用規約をよく理解した上でお使いください。
取得手順
では取得していきます。
ここからはInternet Explorerなどで閲覧していると途中で正常に表示されなくなる恐れがあるのでGoogle Chrome等を使って閲覧してください。
まず
にアクセスしてください。
(リンクが切れている場合は「グーグルマップ APIキー」などのキーワードでインターネット検索してみてください！)
こんな感じの画面になるので右上の「キーの取得」をクリック
ログインを要求されるので必要ならばグーグルのアカウントを取得した上でログインしてください。
ログイン後再び「右上のキーの取得」をクリックするとこのような画面が現れます。
APIキーはプロジェクトという単位で管理するのでここで「Select or create project」→「Create a new project」を選択、適当に名前を決めて新しいプロジェクトを作成します。
プロジェクト名を決めると右下の「CREATE AND ENABLE API」という部分がクリックできる状態になるので、クリックしてください。
APIキーが表示されました！
この状態でもAPIキーは使えますがこのままだともしキーが他人に知られた場合に誰でもこのキーを使用できる状態になってしまうので「FINISH」は押さずに「API Console」というトコロをクリックしてください。
ここで簡単にマップを利用するサイトなどの設定を行っていきます。
広告
APIキーの設定
ではAPIキーの設定を行っていきます。
このような画面になるので少し下の方に下がったトコロの「HTTP」リファラーという部分をクリックしてください。
ここでマップを表示するサイトを具体的に指定できるのでお使いのサイトのURL等を入れます。
指定方法ですが「*」ワイルドカード(全てみたいな意味になります)が使えるのでこれを使用して一気に指定します。
まずお使いのサイトを指定します。
*.example.com/*
example.com/*
これは通常は先頭に「www.」などがつく場合とつかない場合とがあると思いますので両方指定します。
例えばお使いのサイトが「petitetech.com」だった場合は
*.petitetech.com/*
petitetech.com/*
このようになります。
ローカルで使う
自分のＰＣなどでhtmlファイルを編集、地図を確認する時はapiキーを打ち込む部分(詳しくはこちらを参照してください)を丸ごと削除すれば表示する事ができます。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&language=ja®ion=JP"></script>
この「key=YOUR_KEY&」までを丸ごと削除します。
↓
<script src="https://maps.googleapis.com/maps/api/js?language=ja®ion=JP"></script>
ただこの方法は今のトコロ確認できているだけなので近い将来仕様変更に伴いこの方法も使えなくなるかもしれません。
自分のＰＣでもアパッチなどのサーバーを立ててそのサーバー越しに確認したい場合は同じような手順でローカルで表示する用の別のキーを取得して「HTTP」リファラーに
localhost/*
こちらを指定します。
最初に取得したapiキーに加えるカタチでも良さそうなものですが、ページをネット上に公開すると基本的にapiキーは見られる状態になります。
その場合そのapiキーに「localhost/*」が指定されている場合別のＰＣでもそのＰＣ上だけでならそのapiキーを使える状態になってしまうのでローカルで表示する用の別のキーを取得するようにします。
全て入力し終わったら最後にページ下部の保存をクリックすれば設定は完了です！
もし変更等が生じた場合は
こちらでキーの削除、追加、変更などを行う事ができます。
広告