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上やと表示されないので余計にびっくりしました。

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

関連記事

カスタムメニューのナビゲーションラベル文字化け

カスタムメニューを利用しようとしたら文字化けで使えなかった件 はじめに ワードプ

記事を読む

ECキューブに商品登録する時はCSVを使おう

ECキューブで最低限の設定が終わったら次は商品の登録です。 はじめに ECキューブは管理

記事を読む

SEO対策で絶対にしてはいけない事

SEO対策をしていく上でしてはいけない事を今回はご紹介させて頂きます。知識があるのと知識がないのとで

記事を読む

タグ機能を使ったPHPの分岐WordPress

ワードプレスでタグを使った分岐に関するやり方をご紹介させて頂きます。 はじめに PHPを使ったカ

記事を読む

tinymce advancedに絵文字を増やすTypePad 絵文字 for TinyMCE

ワードプレスでも無料ブログ同様絵文字を使いたいけど、tinymce advancedだと少ないですよ

記事を読む

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインストール方法をご紹介いたします。

記事を読む

カスタムフィールドのループで出力数を決める

ループに登録されている情報を一部表示させたい場合に使えます。 はじめに カスタムフィール

記事を読む

ワードプレスで画面が真っ白になった時の対処法

ワードプレスって結構画面を真っ白にしている人多いですよね笑 はじめに クライアントから「急に画面

記事を読む

no image

ワードプレスにソースコードを表示させるプラグイン【SyntaxHighlighter】

ワードプレスにhtmlタグなどのソースコードを記入した際にわかりやすくする為のプラグインです。

記事を読む

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

過去にもwebフォントに触れている記事は多いですが、googleさんのwebフォントの記事を書いてい

記事を読む

Message

現在の総記事数: 321件

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

PHPのランダムを任意の数だけ表示させる方法

PHPのランダムを使い方をもう少し調べたらこんな使い方ができました

ECCUBEのポイント関連のバグ

最終保持ポイントがマイナス表示にならないように調整して下さい。って出て

→もっと見る

PAGE TOP ↑