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

はじめに
Googleで住所を検索する
Googleマップを表示させ、施設名と住所を確認
コードを取得する
コードを貼り付け
まとめ
使用例
ブログ関連記事

はじめに

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

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

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

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

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

この記事では

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

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

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

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

・神奈川県自動車整備振興会教育センター
・横浜市中区扇町1-6-6

■入力環境

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

Googleで住所を検索する

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

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

このGoogleマップですと、縮尺が拡大されて見やすく、情報も加わってより使いやすくなります。

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

さて、住所だけのまま貼ってもいいのですが、より見やすくするために施設名でも検索し、以下のような画面にするとより丁寧です。

施設名と住所が一致しているかを念のため確認しましょう。

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

・神奈川県自動車整備振興会教育センター

・横浜市中区扇町1-6-6

最初から施設名で検索して、住所を確認するやり方でも可

施設か住所か分かっている情報から検索しましょう

(この場合は検索欄の下にある地図をクリックしてください)

コードを取得する

施設名と住所を確認したらコードを取得していきます。

【共有】ボタンをクリックします(画面左側フレームの真ん中あたり)

小さいウィンドウが開きますので【地図を埋め込む】の方のタブをクリックし・・・

【HTMLをコピー】を押すと、コードが取得できます。

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

このページでは「大」サイズを選んでいますが、

「中」サイズがデフォルトです。

「大」「小」「カスタムサイズ」

を選べるようになっていますので、ページによって使い分けましょう。

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

コードを貼り付け

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

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

まとめ

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

・Googleで住所を検索する

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

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

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

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

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

おしまい

使用例

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

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

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

該当箇所

目次　2.会場の地図

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

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

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

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

ブログ関連記事

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

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

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

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

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

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

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

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

・Googleアドセンス関連

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

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

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

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

ssブログでアドセンス

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

・Amazonアソシエイト関連

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

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

TwitterでもAmazonアソシエイトが使えますよ

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