【超簡単】GoogleMapでエラーが出た場合の対処方法

GoogleMapでエラーが出たときは、APIを取得すれば大丈夫

Google Mapは便利でWEBサイトで使っている頻度が高いと思います。

2016年6月以前に作ったMapは問題ありませんが、それ以降新しくWEBサイトにMapを入れると、エラーが表示されてしまいます。

製作を請け負っていたりすると一瞬ドキッとしますが、APIを取得すれば問題ありません。

GoogleMapsAPIの取得方法

1. ウェブ向けのGoogle Maps APIのページにアクセス
2. 画面右上に表示される「キー取得」をクリック

3. ポップアップでアクティベートの説明がでますので「続ける」をクリック

4. Googleのアカウントでログインが必要になりますので、Googleアカウントでログインしてください。
5. API登録の利用規約確認がでますので「はい」を選択して「同意して続行」をクリック

6. APIキーの設定をします。APIキーの名前は適当でOKです。
   キーの制限はWEBサイトで使う場合は「HTTPリファラー」にチェックを入れます。
   チェックを入れるとWEBサイトのアドレスを入力する欄が出てきますのでGoogleMapを設置したいサイトのアドレスをいれます。入力したら「作成」をクリック

7. 少し待ちますが、APIキーが作成完了画面になります。この時点でキーをコピーしなくても大丈夫です。不正利用を防ぐために「キーを制限」をクリック

8. これで作業は完了です。
9. 作成したAPIキーは、いつでも確認できます。左メニューの「認証情報」をクリックすると、自分が付けた名前とキー表示されます。

APIキーの設定方法

普通のhtmlの場合は、サイトの表示したいところに、今まで通りにgoogleMapから共有でiframeをコピーして貼り付け、bodyの終了タグのすぐ上にAPIキーのスクリプトを記載します。
以下の「XXXXXXXXXX」に今回作成したキーを入れます。

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

テーマによって、APIのキーを入力する部分がすでにあると思いますので、テーマごとに対応してください。 たぶんですが、単純にキーをコピペするだけの入力があると思います。

APIキーの確認方法

設定した後に、もう一度確認したい場合や、設定したアドレスを変更したい場合、APIキーを忘れた場合は以下からログインすることで、先ほどのGoogleMapsを設置画面が表示されますので確認することができます。

今回のポイントと
紹介アイテム

GoogleMapは便利な機能で、Googleらしくどんどん機能が増えていきますよね！WEBサイトを製作をしている限りマップ設置は付いてきますので是非チェックしてください！

【コピペOK】Googleマップをレスポンシブで入れる方法

コピペするだけで簡単！Googleマップをレスポンシブで入れる方法

2016-02-18 01:32

wordpressでブログ運用するなら『Xサーバー』がおすすめです！
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
マルチドメイン、サブドメイン、メールアドレス、FTPアカウント、全て無制限！