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

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

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

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

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

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

GoogleMapsAPIの取得方法

  1. ウェブ向けのGoogle Maps APIのページにアクセス
  2. 画面右上に表示される「キー取得」をクリック
  3. キー取得
  4. ポップアップでアクティベートの説明がでますので「続ける」をクリック
  5. アクティベート説明
  6. Googleのアカウントでログインが必要になりますので、Googleアカウントでログインしてください。
  7. API登録の利用規約確認がでますので「はい」を選択して「同意して続行」をクリック
  8. API登録の利用規約確認
  9. APIキーの設定をします。APIキーの名前は適当でOKです。
    キーの制限はWEBサイトで使う場合は「HTTPリファラー」にチェックを入れます。
    チェックを入れるとWEBサイトのアドレスを入力する欄が出てきますのでGoogleMapを設置したいサイトのアドレスをいれます。入力したら「作成」をクリック
  10. APIキーの設定
  11. 少し待ちますが、APIキーが作成完了画面になります。この時点でキーをコピーしなくても大丈夫です。不正利用を防ぐために「キーを制限」をクリック
  12. APIキー作成
  13. これで作業は完了です。
  14. 作成したAPIキーは、いつでも確認できます。左メニューの「認証情報」をクリックすると、自分が付けた名前とキー表示されます。
  15. 認証情報

APIキーの設定方法

<普通のWEBサイトの場合>

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


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

<Wordpressの場合>

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

APIキーの確認方法

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

Google Developers Console

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

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

あわせて読むと効果的な記事
【コピペOK】Googleマップをレスポンシブで入れる方法
【コピペOK】Googleマップをレスポンシブで入れる方法
コピペするだけで簡単!Googleマップをレスポンシブで入れる方法
2016-02-18 01:32

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

ABOUTこの記事をかいた人

1998年からWEB関連の仕事に従事。角川グループのWEB会社に入社し、ディレクター、デザイナーとして経験を積む。2004年よりフリーランスとして活動し、2008年に法人を設立。サイトの制作だけでなく運用保守や紙媒体も行う。専門学校の非常勤講師も経験。