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

【超簡単】GoogleMapでエラーが出た場合の対処方法 google
  1. GoogleMapでエラーが出たときは、APIを取得すれば大丈夫
    1. GoogleMapsAPIの取得方法
    2. APIキーの設定方法
    3. APIキーの確認方法

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

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

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

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

GoogleMapsAPIの取得方法

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

APIキーの設定方法

＜普通のWEBサイトの場合＞

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

[css title=”API Key貼り付けサンプル”]

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

[/css]

＜Wordpressの場合＞

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

APIキーの確認方法

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

Google Developers Console

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

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

あわせて読むと効果的な記事
[nlink url=”https://laplace.link/google/responsive-the-google-map/” title=”【コピペOK】Googleマップをレスポンシブで入れる方法” excerpt=”コピペするだけで簡単！Googleマップをレスポンシブで入れる方法”]

ホーム
トップ