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

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

広告

関連記事

ワードプレスをアップデートしたらログイン出来なくなった人へ

ワードプレスのアップデートが原因でログインできなくなった人へ はじめに ワードプレスからアップデ

記事を読む

amazonのインスタントストアのちょっとしたテクニック

前回から説明しているAmazonインスタントストアのテクニックです。 はじめに Amazon

記事を読む

データベースのテーブルの追加と削除

もとからあるシステムのデータベースをいじるのって素人には勇気がいる内容ですよね。 はじめに EC

記事を読む

no image

FFFTPのインストール方法

ホームページの制作時には必ず必要になってくるソフトがFFFTPです。主にファイルのアップロードに使用

記事を読む

no image

圧縮と解凍のインストール

知り合いに電話で「圧縮してからファイルを送って」と言った時に圧縮と言う言葉を知らない人が多いんだなと

記事を読む

Biz Calendarを使いやすくカスタマイズ

営業日カレンダーを導入したけれど、こんな機能が欲しい!って要望があったのでカスタマイズしてみました。

記事を読む

サクラで日本語ドメインを使う方法

サクラサーバーで日本語ドメインを利用するちょっとした裏技をご紹介いたします。 はじめに

記事を読む

パソコンでスマホ用デザインを確認する方法

パソコンからでもスマホ用のレスポンシブデザインやスマホ用デザインを確認する方法があります はじ

記事を読む

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

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

記事を読む

リンクシェアの登録方法

リンクシェアでアフィリエイトを開始したい方へ はじめに 楽天が運営するアフィリエイトシステム

記事を読む

広告

Message

広告

現在の総記事数: 299件

googleの検索結果から特定の言葉を非表示させる方法

googleの検索結果にある特定のサイトを表示させたくない時にお勧めの

WordPressで特定の画像名だとアップされない

画像にバナーサイズを記載してアップする人もいるでしょうが、これアッ

【無料公開】メルカリで月10万以上稼いだテクニック

メルカリに出品しているけど、なかなか売れない人の参考になれば嬉しいです

メルカリで絶対にあかんバグが起きました

メルカリで絶対にやってはいけないバグが見つかりました。運営さん!早く対

ロボットが資産運用 WealthNaviの申込み方法

最近流行りのロボットに任せる資産運用でWealthNaviを試してみま

→もっと見る


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