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

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

広告

関連記事

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

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

記事を読む

WP Autoresponderをわかる範囲でカスタマイズ

ステップメールが無料で使えるワードプレスのプラグインをご紹介させて頂きます。 はじめに

記事を読む

ワードプレスとツイッターの連携が可能SimpleTweet

ワードプレスとツイッターを連携できるプラグインSimpleTweetの設置方法のご紹介 はじめ

記事を読む

Jetpackの統計情報

ワードプレスにJetpackを利用するきっかけとなった機能の一つがこの統計情報です。 はじめに

記事を読む

FC2ショッピングカートの商品登録方法とデザイン変更

FC2ショッピングカートの商品登録方法とデザインの変更方法をご紹介いたします。 はじめに F

記事を読む

このメールアドレスはサイトと同じドメインには属していません。contact form7 4.4以降の表示について

このメールアドレスはサイトと同じドメインには属していません。と出てきた時は何をすれば良いのかご紹介い

記事を読む

A8の登録方法について

副業でアフィリエイトを始めたい人向け!必ず登録しておきましょう はじめに アフィリエイト

記事を読む

ECキューブ2.11.5のインストール方法

ショッピングサイトの構築をするならECキューブと言うことで今回はインストール方法をご紹介致します。

記事を読む

ユーザーIDで分岐させる方法 WordPress

ワードプレスを使ったサイトを構築中にユーザーによる分岐をするケースもありますよね。 はじめ

記事を読む

お名前.comでドメインを取得する方法

お名前.comでドメインを取得した事がない方向けにご紹介させて頂きます はじめに 個人的

記事を読む

広告

Message

広告

現在の総記事数: 288件

yahooリスティング広告で広告を作るまでの流れ

yahooリスティング広告でキャンペーンの作成から広告の登録までをご紹

yahooリスティング広告のキーワード単価を調べる方法

そのキーワードにいくら支払えばクリックが見込めるのかわかりやすツールで

yahooリスティング広告の広告費の決め方

広告費用って毎月いくら必要なのか?いろいろなパターンを考えてみました

yahooリスティング広告のキーワードを設定する際の考え方

yahooリスティング広告のキーワードを間違えると全然効果がないので気

yahooリスティング広告らくアドの利用方法

yahooリスティング広告の使い方がわからない方はらくアドを利用してみ

→もっと見る


  • ここでは副業での稼ぎ方や、誰でも簡単に稼げる副業のジャンルなどを紹介しております。 今の所、平均して月に15,000円ほど副収入があります。
    • エステコスメ エステ化粧品やエステコスメの通販サイトです。一般の方でもエステサロンで使用しているコスメを激安価格で購入出来ます。
    • エステ用品 エステ用品のMOCOエステです。新規開業を考えているエステサロン様向けに卸価格でご提供させて頂きます。
    • サロン集客 サロン集客に悩んでいる人向けに完全無料で集客方法を公開しております。インターネットを使う事で0円でサロン集客する方法もお教えいたします。
    • ヒートマット 遠赤外線ヒートマットシリーズは入ると滝に打たれたような発汗を体験できます。サロン様から一般の方までご利用いただけます
    • フェイシャルスチーマー 業務用だけでなく、一般の方も使用出来るフェイシャルスチーマーを詳しく説明しているホームページです。
    • 美容室のホームページ制作 美容室やエステサロン、ネイルのホームページ制作です。3万円台から制作も出来るので予算のないサロン様にも対応しております。
PAGE TOP ↑