Googleマップをブログで表示させるには【ワードプレス】

はじめに

この記事ではGoogleマップをブログ上で表示させるやり方を説明していきます。

ワードプレス(WordPress)使用者むけの記事ですが、HTML言語のサイトであればGOOGLEマップを表示できると思いますので、よろしければご参考にしてください。

▼　記事の実例(Googleマップが埋め込まれている)

>>>該当箇所　　目次　3.会場の地図

神奈川県 選任前(2022年度・令和4年度) 整備管理者研修の日程と会場と地図

神奈川県　整備管理者選任前研修の関連情報　・日程をお早めにご確認ください!!　・会場への地図(Googleマップでナビ機能が便利)　・他都道府県全国版へのリンクあり　・運輸局や関連協会への参照リンク充実

yasssy.com

この記事では

「整備管理者研修の日程と会場と地図」

というタイトルで、整備管理者研修の日程と会場と地図を記した記事となっています。

ただ住所をのせるだけでなく、サイトを見る人がひと目でわかり、そこをクリックすればすぐGoogleマップにアクセスできるようにとの意図で、ユーザーさんにとって使いやすいページを目指しています。

Googleで住所を検索する

まず、表示させたい住所をGoogle検索で入力してマップを表示させます。

この様に「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マップを埋め込む事によりビジュアルにも訴えかけてより見やすいページが作成できるのではと思います。

次項に当サイトでの使用例を示しておきます。

おしまい

使用例

この記事で取り上げたページの例

整備管理者研修の日程と場所

神奈川県 選任前(2022年度・令和4年度) 整備管理者研修の日程と会場と地図

神奈川県　整備管理者選任前研修の関連情報　・日程をお早めにご確認ください!!　・会場への地図(Googleマップでナビ機能が便利)　・他都道府県全国版へのリンクあり　・運輸局や関連協会への参照リンク充実

yasssy.com

該当箇所

目次　2.会場の地図

>>>当サイトの他の記事での使用例

(旅先のハワイでの位置表示)

【会社やめてハワイに来てみた】その13 レンタカー2台目はマスタング

ストリートガールの魔の手から逃れ、タンタラスの丘での甘いひとときをすごした。彼女たちは先に日本に帰ってしまったけど思い出を残してくれた。レンタカーのトーラスワゴンを返却し、つぎは「マスタング」　オープンで電動でトップが開くキモチいいクルマ

yasssy.com

ブログ関連記事

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

6つのステップで!!【稼げるブログ】をあなたもはじめてみませんか?

終身雇用の神話崩壊、副業容認の世の中のムード→スキマ時間であなたも稼いでみませんか?　ブログには稼ぐだけではない自分発見の魅力もあります!　このブログを2019年5月にスタートしたときのやり方を順を追ってわかりやすく説明していきます

yasssy.com

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

【ワードプレス】無料テーマのCocoonでもっとアピールする!　これだけの表現ができる!!

ワードプレスの無料テーマのCocoonですが、工夫をすると色々な見せ方ができます。気に入ったビジュアルがあれはここからコピペしてお使いください!!

yasssy.com

【ワードプレス】外部ブログカードのビジュアル向上! より見やすく!!(例 Cocoonテーマ x So-netブログ)

サイトが成長するにつれショボいブログカードが目立つようになってきました。　ワードプレス+Cocoonテーマ x So-netブログの例でイケてないブログカードのビジュアル向上をめざします!!　他のテーマの方も、応用が効けばご参考にしてください

yasssy.com

・Googleアドセンス関連

地獄の2ヶ月間 【アドセンス合格→広告激減→アカウント停止→復活まで】

Googleアドセンスの自己クリックで広告が激減・・そしてアカウント停止!!　停止期間を過ぎても復活がなく、アカウント剥奪もちらついたころ・・ようやく復活。【自己クリックはダメ・ゼッタイ】のことばが身にしみた制裁期間の憂き目。

yasssy.com

【アドセンス広告が表示されない憂鬱】グーグル先生、自己クリックはもうしません。。

朝起きるとAdsense の広告が表示されていない!　なぜ!!　もしや??　その他、広告が表示されない場合やアドセンス禁止事項など

yasssy.com

ssブログでアドセンス

ssブログでGoogleアドセンス申請にトライしました　プライバシーポリシーもお問い合わせフォームもなく、ダメもとでやってみたら・・アラ不思議

yasssy.com

アドセンスを2年やってわかった事

はじめに 2019年にブログを立ち上げ、グーグルアドセンスを始めてからおよそ2年、ようやくに収益が安定してきたようなので、これまでにわかった事などを少しずつ書き留めておきたいと思います。 自己クリック厳禁 ・自分のブログの

yasssy.com

・Amazonアソシエイト関連

Amazonアソシエイトの審査合格に必要な〇〇【開設20日で記事数は12】

これでAmazonアソシエイト審査に合格しました!　Amazonアソシエイトの合格率upに必要な、ラブレターにも似た、レビューページ作成のススメ!!

yasssy.com

Twitter上でもAmazonアソシエイトが貼れる件

AmazonアソシエイトをブログだけでなくTwitter上でも活用して収益アップを図りましょう!!　Amazonアソシエイトのアカウントを既にもっている方なら短時間で追加申請が可能です。

yasssy.com

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

6つのステップで!!【稼げるブログ】をあなたもはじめてみませんか?

終身雇用の神話崩壊、副業容認の世の中のムード→スキマ時間であなたも稼いでみませんか?　ブログには稼ぐだけではない自分発見の魅力もあります!　このブログを2019年5月にスタートしたときのやり方を順を追ってわかりやすく説明していきます

yasssy.com