Googleマップをブログで表示させるには
【ワードプレス】
はじめに
この記事ではGoogleマップをブログで表示させるやり方を説明していきます。
ワードプレス(WordPress)使用者むけの記事ですが、HTML言語のサイトであればGOOGLEマップを表示できると思いますので、よろしければ参考にしてください。
▼ 記事の実例(Googleマップが埋め込まれている)
>>>該当箇所 目次 3.会場の地図

この記事では
「整備管理者研修の日程と会場と地図」
というタイトルで、整備管理者研修の日程と会場と地図を記した記事となっています。
ただ住所をのせるだけでなく、サイトを見る人がひと目でわかり、そこをクリックすればすぐGoogleマップにアクセスできるようにとの意図で、ユーザーさんにとって使いやすいページを目指しています。
■行き先のデータ(施設名と住所)
・神奈川県自動車整備振興会教育センター
・横浜市中区扇町1-6-6
■入力環境
・OS win7/10 ブラウザ 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>
このページでは「大」サイズを選んでいますが、
「中」サイズがデフォルトです。
「大」「小」「カスタムサイズ」
を選べるようになっていますので、ページによって使い分けましょう。
「カスタムサイズ」はサイズの指定が可能です。
コードを貼り付け
取得したコードをワードプレスで【テキスト】として貼り付けます。
貼り付けたら【ビジュアル】に切り替えて表示されるか確認しましょう。
まとめ
さいごに手順を簡単におさらいして終わります。
・Googleで住所を検索する
・Googleマップを表示させ、施設名と住所などを確認
・コードを取得しテキストで貼り付け
ワードプレス使用者むけに記事をかきましたが、基本、HTMLであればコード埋め込みでGOOGLEマップが表示できるのではないかと思います。
住所などをサイトに載せた際にGOOGLEマップを埋め込む事によりビジュアルにも訴えかけてより見やすいページが作成できるのではと思います。
次項に当サイトでの使用例を示しておきます。
おしまい
使用例
この記事で取り上げたページの例
整備管理者研修の日程と場所

該当箇所
>>>当サイトの他の記事での使用例
(旅先のハワイでの位置表示)

ブログ関連記事
▼ ワードプレスでのブログ開設のまとめ記事

・Cocoonテーマのカスタマイズ関連記事


・Googleアドセンス関連



・Amazonアソシエイト関連


▼ ワードプレスでのブログ開設のまとめ記事
