11,603 views

この記事は最終更新から 1899日 が経過しています。

1. 困ったこと

ホームページに GoogleMap を埋め込んで使っていたが、いつからか地図上に
For development purpose only
と表示されるようになった。

更に、地図上にグレーのフィルターが被されたような見づらい状態になってしまった。

2. やりたいこと

これを、元々の見やすい状態に戻したい。

3. 原因は？

こういうことらしい。

要約すると…
・2018年6月11日以降、GoogleMapの表示には APIキーが必須になる。
・課金登録が必要になる。 ただし毎月 $200 分までは無料で課金されない。

4. やってみる

1) Google Maps API Keyを取得する。

こちらのページから。

カード番号を入力するのは少々不安だが…
こんな時用に限度額を下限ギリギリに設定した雑用カードを作ってあるのでこれを使う。

2) Google Maps API Keyが使えるサイトを制限する。

自分が取得した Google Maps API Keyが使えるサイトを制限しておく。
これをやらないと、勝手に他人にキーを使われ、自分が課金されてしまう可能性がある？

「API」を選択し、「Maps JavaScript API」の「詳細」を押下する。

「認証情報」を選択し「API key」を押下する。

「HTTPリファラー（ウェブサイト）」を選択する。
「ウェブサイトの制限」に、自分の APIキーの使用を許可するサイトを登録する。

※TOPページ配下のページでも使えるように、「*」でワイルドカード指定しておく。
※これを忘れると「あれっ？キーを指定したのに MAP表示でエラーが出るぞ？」となる。

3) 無料枠 $200突破による請求発生を回避する。

まず無いとは思うが…
自分のホームページ上で誰かがいたずらで GoogleMapを触りまくり、無料枠 $200を超える操作をした場合、自分に対してその分の請求が発生してしまう。

これを回避するために、APIの使用制限を設定しておきたい。

「API」を選択し、「Maps JavaScript API」の「詳細」を押下する。

「割り当て」を選択し、「Map loads per day」の編集ボタンを押下し、一日のアクセス数の上限を設定する。

ここでは制限値を 800とした。
自分のサイトを訪れる人はこんなに多くないのでこれで十分なのだ。

Street View APIを使用しているならば、これも同様に設定しておくこと。

(4) ホームページの記述変更

<script> で Googleapiをロードしているところに取得したキーを追記する。

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

できた！

Watermarkが消え、グレーのフィルターも消えた。

---