Googleマップをブログで表示させるには
【ワードプレス】
はじめに
この記事ではGoogleマップをブログ上で表示させるやり方を説明していきます。
ワードプレス(WordPress)使用者むけの記事ですが、HTML言語のサイトであればGOOGLEマップを表示できると思いますので、よろしければご参考にしてください。
▼ 記事の実例(Googleマップが埋め込まれている)
>>>該当箇所 目次 3.会場の地図
この記事では
「整備管理者研修の日程と会場と地図」
というタイトルで、整備管理者研修の日程と会場と地図を記した記事となっています。
ただ住所をのせるだけでなく、サイトを見る人がひと目でわかり、そこをクリックすればすぐGoogleマップにアクセスできるようにとの意図で、ユーザーさんにとって使いやすいページを目指しています。
■行き先のデータ(施設名と住所)
・神奈川県自動車整備振興会教育センター
・横浜市中区扇町1-6-6
■入力環境
・ＯＳ win10 ブラウザ Chrome
・ワードプレス(WordPress)テーマ コクーン(Cocoon) クラッシックエディター使用
Googleで住所を検索する
まず、表示させたい住所をGoogle検索で入力してマップを表示させます。
横浜市中区扇町1-6-6
この様に「Google検索でマップが表示」された状態になりますが、これだとただ地図が載っているだけですので、より詳しく見てもらうために、出てきたマップをクリックしてGoogleマップに飛びます。
このGoogleマップですと、縮尺が拡大されて見やすく、情報も加わってより使いやすくなります。
Googleマップを表示させ、施設名と住所を確認
さて、住所だけのまま貼ってもいいのですが、より見やすくするために施設名でも検索し、以下のような画面にするとより丁寧です。
施設名と住所が一致しているかを念のため確認しましょう。
■行き先のデータ(施設名 住所)
・神奈川県自動車整備振興会教育センター
・横浜市中区扇町1-6-6
最初から施設名で検索して、住所を確認するやり方でも可
施設か住所か分かっている情報から検索しましょう
(この場合は検索欄の下にある地図をクリックしてください)
神奈川県自動車整備振興会教育センター
コードを取得する
施設名と住所を確認したらコードを取得していきます。
【共有】ボタンをクリックします(画面左側フレームの真ん中あたり)
小さいウィンドウが開きますので【地図を埋め込む】の方のタブをクリックし・・・
【HTMLをコピー】を押すと、コードが取得できます。
このようなコードが取得できてればOKです。
<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3250.5572808556594!2d139.6354666147884!3d35.44099555071801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60185cefd294d263%3A0x128c861e83aea90e!2z5LiA6Iis56S-5Zuj5rOV5Lq656We5aWI5bed55yM6Ieq5YuV6LuK5pW05YKZ5oyv6IiI5Lya5pWZ6IKy44K744Oz44K_44O8!5e0!3m2!1sja!2sjp!4v1576974366581!5m2!1sja!2sjp” width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
このページでは「大」サイズを選んでいますが、
「中」サイズがデフォルトです。
「大」「小」「カスタムサイズ」
を選べるようになっていますので、ページによって使い分けましょう。
「カスタムサイズ」はサイズの指定が可能です。
※追記2013.5.13 「大」サイズはAMPでエラーがでるようになったので、以降「中」サイズに変更しています
コードを貼り付け
取得したコードをワードプレスで【テキスト】として貼り付けます。
貼り付けたら【ビジュアル】に切り替えて表示されるか確認しましょう。
まとめ
さいごに手順を簡単におさらいして終わります。
・Googleで住所を検索する
・Googleマップを表示させ、施設名と住所などを確認
・コードを取得しテキストで貼り付け
ワードプレス使用者むけに記事をかきましたが、基本、HTMLであればコード埋め込みでGOOGLEマップが表示できるのではないかと思います。
住所などをサイトに載せた際にGOOGLEマップを埋め込む事によりビジュアルにも訴えかけてより見やすいページが作成できるのではと思います。
次項に当サイトでの使用例を示しておきます。
おしまい
使用例
この記事で取り上げたページの例
整備管理者研修の日程と場所
該当箇所
>>>当サイトの他の記事での使用例
(旅先のハワイでの位置表示)
あとがき サーチコンソール上でのAMPページでのエラー対処
(記事更新2021.05.13)
この記事の方法で問題なかったのですが、ここ2ヶ月くらい(2021.3.10あたりから)、サーチコンソール上でのAMPページで、
「AMPページが無効です」
と表示されるようになってしまいました。
原因を見ていくと、
「許可されていない属性または属性値が HMTL タグにあります。」
との表示。
その、
「許可されていない属性または属性値がHMTLタグにあります。」
の該当箇所はどうやらgoogleマップの埋め込みコードの部分。
googleマップの仕様変更かな?と思いつつ、新しくコードを入れなおしたりして様子を見ていたのですが、効果はなし。
ふと思ったのが、もしかしてサイズが大きいのが問題かと思い、
「大」サイズをやめて「中」サイズとするとエラーがなくなりました。
さいごに新旧コードを貼り付けておきますので参考にされたい方はどうぞ
旧コード 「大」サイズ AMP無効
<iframe style=”border: 0;” tabindex=”0″ src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3250.5446247990303!2d139.63721431525212!3d35.441308980250874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x128c861e83aea90e!2z5LiA6Iis56S-5Zuj5rOV5Lq656We5aWI5bed55yM6Ieq5YuV6LuK5pW05YKZ5oyv6IiI5Lya5pWZ6IKy44K744Oz44K_44O8!5e0!3m2!1sja!2sjp!4v1589152428350!5m2!1sja!2sjp” width=”800″ height=”600″ frameborder=”0″ allowfullscreen=”allowfullscreen” aria-hidden=”false”></iframe>
直したコード 「中」サイズ AMP有効
<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6501.064023358365!2d139.6337517036161!3d35.44162134404987!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x128c861e83aea90e!2z5LiA6Iis56S-5Zuj5rOV5Lq656We5aWI5bed55yM6Ieq5YuV6LuK5pW05YKZ5oyv6IiI5Lya5pWZ6IKy44K744Oz44K_44O8!5e0!3m2!1sja!2sjp!4v1620896195344!5m2!1sja!2sjp” width=”600″ height=”450″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>
ブログ関連記事
▼ ワードプレスでのブログ開設のまとめ記事
・Cocoonテーマのカスタマイズ関連記事
・Googleアドセンス関連
・Amazonアソシエイト関連
▼ ワードプレスでのブログ開設のまとめ記事