稼げる副業でお小遣いを稼ぐ方法

稼げる副業でお小遣いを稼ぐだけじゃなく、料理や映画アニメ、趣味などメモにも使っているブログ

副業で稼ぐ仕組みの作り方

Googleマップを正しく表示させる方法

投稿日:2016年10月15日 更新日:

このページではGoogleマップが正しく読み込まれませんでした って出てしまう人続出ですね

はじめに

最近新しいサイトを立ち上げたのですが、「このページではGoogleマップが正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください。」って表示されるようになっちゃいましたね。

これ、実はGoogle側がやったものでバグったわけでも、タグの入力ミスでもないのでご安心ください。

今回はGoogleマップを正しく表示させる方法をわかりやすくご紹介させて頂きます。

注意事項

googleのアカウントが必要となりますのでgmailアカウントを用意しておきましょう

Googleマップが表示されない!?

newgooglemap01

googlemapを表示させるようのタグを入力したものの、「このページではGoogleマップが正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください。」と出てきてしまっている場合、かなり簡単な方法で表示させる事が出来ます。

アカウントの登録みたいなもん

今までと違い、これからはGoogle側にアカウント登録する事で地図を表示できるようになりました。

まずはgmailにログインした状態でアカウントの登録をしましょう

アカウント登録はこちら

newgooglemap02

右上の「キーを取得」をクリックします

newgooglemap04

続けるをクックします。

newgooglemap05

すべてのサービス関連APIについて、適応される利用規約を尊寿して利用することに同意します。の「はい」を選択し、同意して続行をクリックします。

newgooglemap06

APIキーの名前はわかりやすいように「map」にし、私の場合は運営するWebサイトで利用するので「HTTPリファラー(ウェブサイト)」を選択しました。

newgooglemap07

次に私が間違えた部分なので、少し丁寧に紹介させて頂きます。

この部分はGoogleマップを表示させたいサイトのURLを入力しますが例で書かれている通りに入力します。

× http://www.〇〇〇.com/

× www.〇〇〇.com/

× 〇〇〇.com/

〇 *.〇〇〇.com/*

これを間違えると、何をしても「このページではGoogleマップが正しく読み込まれませんでした。」と表示され続けるので気を付けてくださいね。

そして、作成ボタンをクリックします。

newgooglemap08

するとAPIキーが取得できました。とりあえずAPIキーはコピペしておいてください。

JavaScriptにAPIキーを追加

Googleマップを掲載させる場合ヘッダーに情報を追加させるのですがここにAPIキーも同時に入力します。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&key=〇〇〇"></script>

こんな感じです。

地図を見てみよう

newgooglemap09

うん、うまく表示されましたね。

以上で「このページではGoogleマップが正しく読み込まれませんでした。JavaScriptコンソールで技術情報をご確認ください。」と表示させなくする方法でした。

さいごに

最初はごっつ焦った

いつもなら問題なく表示されていたのに、コピペしても表示されないとか正直ありますよね笑

ローカルやと表示されるのにWEB上やと表示されないので余計にびっくりしました。

色々な事が変わっていっているので、ついていけない人は本当に大変やと思いますわ。

-副業で稼ぐ仕組みの作り方
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ワードプレスのプラグインCustom Field Suiteの使い方

Custom Field Suiteを入れたもののどうやって使うんだろうって人向けの細かい使い方をご紹介いたします。 関連記事: カスタムフィールドで画像を出力する時のヒント【ワードプレス】 簡単にカ …

投稿一覧にカスタムフィールドの情報を追加

カスタムフィールドを作ったものの、投稿画面側でどの記事にどの情報が入っているのかわからないので管理画面側で確認する方法をご紹介いたします。 関連記事: 【WordPress】lightning pro …

ワードプレスでページごとにレイアウトを変える方法

ワードプレスでブログを運営中で特定のページだけカスタマイズしたいなんて事ありませんか? はじめに 企業ページを制作する際に、通常の固定ページと商品情報を掲載するページの場合どうしてもレイアウトが違う為 …

amazon seller centralでのブランド登録方法

amazon seller centralで商品等登録する際に、ブランド登録する方法をご紹介いたします。 はじめに amazon seller centralで商品登録をする際に、ブランド登録をする方 …

Contact Form 7で確認用メールアドレスを作ってみた

Contact Form 7ってメールアドレスの確認用って作れないの?と言う質問を頂きました。 関連記事: 海外からの迷惑メールを驚くほどブロック【Contact Form 7】 【WordPress …