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

はじめに
Googleで検索する
Googleマップを表示させる
住所だけでなく施設名も表示する
コードを取得する
地図のサイズについて
コードを貼り付ける
まとめ
あとがき
ブログ関連記事

はじめに

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

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

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

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

秋田県選任前整備管理者研修の日程と会場と地図

Googleマップが埋め込まれている記事では「整備管理者研修の日程と会場と地図」というタイトルで、整備管理者研修の日程と会場と地図を記した記事となっています。

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

行き先のデータ(住所と施設名)

・秋田県秋田市河辺戸島上祭沢３８−４
・秋田県森林学習交流館「プラザクリプトン」

入力環境

・ＯＳ win10 ブラウザ Chrome
・ワードプレス(WordPress)テーマ　コクーン(Cocoon)　クラッシックエディター使用

Googleで検索する

まず、ブラウザなどのGoogle検索を使用して表示させたい住所や施設名などを入力します

Googleマップを表示させる

Googleで検索しますと前項目の様に「Google検索でマップが表示」された状態になりますが、これだと地図が載っているだけですので、より詳しく見てもらうために、画面左上の「地図」をクリックしてGoogleマップに飛びます。

住所だけでなく施設名も表示する

このGoogleマップですと、縮尺が拡大されて見やすく、情報も加わって使いやすくなりますが、より詳しく、間違いないようにするために住所だけでなく拡大表示をさせて正しい施設名を表示させます

同じ番地に複数の施設が存在する場合もあります

拡大表示して施設名が表示されたので、正しい施設名である「秋田県森林学習交流館プラザクリプトン」クリックします

コードを取得する

行き先の住所が施設名の「秋田県森林学習交流館プラザクリプトン」に変わったのを確認して、行き先のデータ(住所と施設名)に間違いがないかを確認してから

・秋田県秋田市河辺戸島上祭沢３８−４
・秋田県森林学習交流館「プラザクリプトン」

「共有」をクリックしてコードを取得していきます

小さいウィンドウが開きますので【地図を埋め込む】の方のタブをクリックし、表示サイズを選び【HTMLをコピー】を押すと、コードが取得できます

このようなコードが取得できてればOKです

地図のサイズについて

使用先のページでは「大」サイズを選んでいますが、Googleマップでは「中」サイズがデフォルトでほかに「大」「小」「カスタムサイズ」を選べるようになっていますので、ページによって使い分けましょう。

「カスタムサイズ」はサイズの指定が可能です。

コードを貼り付ける

取得したコードをワードプレスで【テキスト】として貼り付けます

貼り付けたら【ビジュアル】に切り替えて表示されるか確認しましょう。

まとめ

さいごに手順を簡単におさらいして終わります。

・Googleで住所を検索する

・Googleマップを表示させ、施設名と住所などを確認

・コードを取得しテキストで貼り付け

ワードプレス使用者むけに記事をかきましたが、基本、HTMLであればコード埋め込みでGoogleマップが表示できると思います。

住所などをサイトに載せた際にGoogleマップも埋め込む事によりビジュアルにも訴えかけてより使いやすいページが作成できるのではと思いました。

あとがきに当サイトでの使用例を示しておきます。

おしまい

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

Googleマップをブログで表示させるやり方と手順をわかりやすく解説。　ワードプレス(WordPress)使用者むけの記事ですがたいていのブログやサイトなら応用ができますので、どうぞ参考にしてみてください。

あとがき

イレギュラー　住所が先?　施設名が先?

施設名で検索して住所も合っていればいいのですが、施設名が正しくない、変更されている、別称があるなどの可能性もあります

また、参照元の住所が合ってない、同じ番地に複数の施設、字(あざ)などで詳しく表示されない場合もあります

施設名よりは住所のほうが変更が少ないようなので住所を先にするやり方で記事を書いていますが、この辺は好き好きでいいと思いますし、要はユーザーの方が間違いなく意図した場所にたどり着けるように住所で検索し施設名も表示するようにしています

ちなみにGoogleマップでは施設名には住所が紐づけされて表示されております

使用例

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

秋田県整備管理者研修の日程と会場と地図

秋田県選任前整備管理者研修の日程と会場と地図

・該当箇所

目次　2.会場の地図

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

ノースショアってどの辺?

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

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

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

ブログ関連記事

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

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

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

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

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

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

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

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

・Googleアドセンス関連

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

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

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

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

ssブログでアドセンス

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

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

実際の収益はどれくらい?　アクセス数が多い方が収益を得やすいのか?　2019年にブログを立ち上げ、グーグルアドセンスを始めてからおよそ2年、ようやくに収益が安定してきたようなので、これまでにわかった事などを少しずつ書き留めておきたいと思います

・Amazonアソシエイト関連

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

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

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

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

YouTube上でAmazonアソシエイトを貼る【追加URLの報告不要、サイト審査なし】

YoutubeチャンネルでもAmazonアソシエイトが貼れます!!　追加URLの報告不要でサイト審査も不要でした　サイトやブログだけでなくYoutubeチャンネルもおおいに活用しましょう