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

ブログ運営

 

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

 

スポンサーリンク

はじめに

この記事では、

Googleマップをブログで表示させるやり方

を説明していきます

 

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

HTML言語のサイト

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

 

 

 

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

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

>>>該当箇所へジャンプ  目次 2.会場の地図

 

この記事では

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

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

ただ住所をのせるだけでなく、サイトを見る人がひと目でわかり、そこをクリックすればすぐ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年度)の案内です。 日程と会場をご覧下さい! 会場への地図もあります。

 

該当箇所へジャンプ

目次 2.会場の地図

 

 

 

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

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

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

 

 

ブログ関連の記事

 

ブログ運営
【終身雇用の神話は崩壊・副業容認の世の中のムード】スキマ時間であなたも稼いでみませんか? ブログには稼ぐだけではない自分発見の魅力もあります!

 

 

・Googleアドセンス関連

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

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

 

 

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

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

 

 

・Amazonアソシエイト関連

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

 

 

 

 

 

ひまつぶしのおすすめ記事

 

・お時間のある方、よろしければ当サイトの記事でお楽しみください

 

 

わたしの逸品

 

わたしの逸品
そのコンセプトは【長く使えて、よいもの】キッカケは・・ひとめぼれ、プレゼント、ボーナス買いetc・・など様々だけど、気が付いたら何十年も使っていて身の回りを満たしていた、手帳、料理道具、ブーツにメガネにスピーカーやお気に入りの文具たち

 



 

クルマ 乗り物

 

クルマ 乗り物
知らないクルマ・バイクはおそらく1000台に1台もない・・はず(乗り物好き) 一級小型船舶も取得 17年17万キロストーリー ハワイでのレンタカー話 整備管理者関係のお役立ちなど 記事を拡充中です

 

 

海外

 

海外
初めてのハワイではファーストフード店でポテトすら頼めない屈辱! オーストラリアのホームステイでもばあさんや女の子にイジられてしまう。。すこしは上達したマウイ島でも・・やっぱり色々ハプニングが・・・

 

 

 

やってみた

 

やってみた
>>会社やめてハワイに行ってみた 【会社やめたぞハワイに行くぞ】(海外はじめて) その1 ファーストフライト有給消化100%で会社を円満退社!日本を脱出! 激揺れの飛行機はコーヒーはこぼれる、叫び声はあがるの散々なもの・・海

 

 

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