LifeSTYLE Factories 【豊かなライフスタイルをめざして】

Googleマップをブログに貼り付けるには【ワードプレス】

ブログ運営

Googleマップをブログに貼り付けるには
【ワードプレス】

スポンサーリンク

はじめに

この記事では、

ブログ内にGoogleマップを貼り付けるやり方

を説明していきます

 

ワードプレス使用者むけの記事ですが、

HTML言語のサイト

であればGOOGLEマップを表示できると思いますので、よろしければ参考にしてください

 

 

 

とりあげる記事(Googleマップが埋め込まれている)

【選任前】2019年度神奈川県 整備管理者研修の日程と場所(令和元年度・平成31年度)
【選任前】2019年度の神奈川県 整備管理者研修の日程と場所(令和元年度・平成31年度)の案内です。 日程と会場をご覧下さい! 会場への地図もあります。

 

この記事では

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

というタイトルで、該当の日程と場所を記した記事となっています。

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

 

 

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

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

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

 

■入力環境

・OS win7  ブラウザ Chrome

・WPテーマ コクーン  クラッシックエディター使用

 

Googleで住所を検索する

 

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

 

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

検索

 

 

 

 

Google検索でマップが表示されますが、これだと

ただ地図が載っているだけ

と思いますので、より詳しく見てもらうために、

出てきたマップをクリックしてGoogleマップに飛びます

 

 

 

このGoogleマップですと、

縮尺が拡大されて見やすく、情報も加わってより使いやすくなります

 

 

MAPを表示させ、施設名と住所を確認

さて、

住所だけのまま貼ってもいいのですが、

より見やすくするために施設名でも検索し、以下のような画面にするとより丁寧です

 

 

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

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

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

・横浜市中区扇町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>

 

 

※このサイトではデフォルトの「中」サイズを選んでいますが、

「大」「小」「カスタムサイズ」も選べるようになっていますので、

ページによって使い分けましょう

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

コードを貼り付け

 

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

 

 

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

 

 

 

 

 

スポンサーリンク

まとめ

 

ワードプレス使用者むけに記事をかきましたが、

基本、HTMLであればコード埋め込みでGOOGLEマップが表示できると思います。

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

さいごに当サイトでの使用例を示しておわります。

 

 

 

 

この記事の例

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

【選任前】2019年度神奈川県 整備管理者研修の日程と場所(令和元年度・平成31年度)
【選任前】2019年度の神奈川県 整備管理者研修の日程と場所(令和元年度・平成31年度)の案内です。 日程と会場をご覧下さい! 会場への地図もあります。

該当箇所

目次 4.会場の地図

 

 

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

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

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

 

 

 

おしまい

 

 

 

ブログ関連のおすすめ記事

 

■ ブログ運営シリーズ LifeSTYLE Factorie

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

【ワードプレス】無料テーマのCocoonでもっとアピールする! これだけの表現ができる!!
ワードプレスの無料テーマのCocoonですが、工夫をすると色々な見せ方ができます。気に入ったビジュアルがあれはここからコピペしてお使いください!!
【ワードプレス】外部ブログカードのビジュアル向上! より見やすく!!(例 Cocoonテーマ x So-netブログ)
サイトの成長にともなって、ショボいブログカードが目立つようになってきました。 ワードプレス+Cocoonテーマ x So-netブログの例でイケてないブログカードのビジュアル向上をめざします!! 他のテーマの方も、応用が効けばご参考にしてください。

 

・Googleアドセンス関連

地獄の2ヶ月間 【アドセンス合格→広告激減→アカウント停止→復活まで】
Googleアドセンスの自己クリックで広告が激減・・そしてアカウント停止!! 停止期間を過ぎても復活がなく、アカウント剥奪もちらついたころ・・ようやく復活。【自己クリックはダメ・ゼッタイ】のことばが身にしみた制裁期間の憂き目。
【アドセンス広告が表示されない憂鬱】グーグル先生、自己クリックはもうしません。。
朝起きるとAdsense の広告が表示されていない! なぜ!! もしや??

・クロネさんのブログ講座でおすすめ記事として紹介されました

Googleアドセンスの自己クリック・相互クリック・応援クリックはダメ絶対!|クロネのブログ講座
結論から言えばGoogleアドセンスで 自分が収益を得るための「自己クリック」 自分たちが収益を得るための「相互クリック

 

・Amazonアソシエイト関連

【Amazonアソシエイト】の審査合格に必要な〇〇
わたしはこれでAmazonアソシエイト審査に合格しました! Amazonアソシエイトの合格率upに必要な、ラブレターにも似た、レビューページ作成のススメ!!
TwitterでもAmazonアソシエイトが使えますよ
Twitterをはじめて3ヶ月になりますが、うまくフォローをすると諸先輩方からかなり有益な情報が得られます。 昨日驚いたのは・・・ TwitterでもAmazonアソシエイトが使えるという件

 

 

 

 

 

タイトルとURLをコピーしました