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

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

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

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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

ワードプレスの設定2【インストール】

ワードプレスのアップロードが完了すればいよいよインストールです。ワードプレスのインストールはこれだけ?と思ってしまうような内容です。ではインストールを方法を公開致します。 関連記事: ECCUBE3を …

無料ECサイトカスタマイズ

前回お話した無料でECサイトが3分で作れるのデザインなどのカスタマイズ方法についてご紹介いたします。 関連記事: ノロウイルスの治し方 急にショッピングサイトの売り上げが落ちた人へ ワードプレスでメル …

スプレッドシートで見積書を作る時に役立つテクニック

スプレッドシートでもエクセルと同様に計算が出来ました 関連記事: Jetpackのスペル&文法チェック アフィリエイト用リンクをクリックされやすくするテクニック 副業するなら情報を売ろう データベース …

カスタムフィールドで入力したfeed情報を表示させる方法wordpress

ポータルサイトを作成する際に各店舗のブログ記事の新着情報を表示させたいなぁって事ありますよね?できちゃいますよ。 関連記事: アメブロのRSS内にあるPRを削除してワードプレスに表示させる方法 カスタ …

GoogleのWEBフォントを導入してみた

過去にもwebフォントに触れている記事は多いですが、googleさんのwebフォントの記事を書いていなかったなと思いアップしました。 関連記事: 本当のアクセス解析じゃなかった・・・リファラスパム編 …