★活ノートシリーズ月間100,000ページビュー達成! 今後も楽しい記事をお届けします!★

【WordPress】ブログ記事にGoogleマップをキレイに貼る方法

【Wordpress】ブログ記事にGoogleマップをキレイに貼る方法

katsuです。

 

今回の「ブログ作成備忘録」では、ブログの記事にGoogleマップを上手く貼り付ける方法をまとめておきたいと思います。

 

例えば記事内でどこかのお店を紹介したり、観光地を紹介したりする場合、地図を添付しておきたいものです。これまではこんな感じで、公式サイトに掲載されている地図をお借りしたりしていました。

 

例えば長浜駅前のまるい食パン専門店さん。

コメント 2019-07-30 170154

 

そして東京中野のTHE WATCH COMPANYさん。

コメント 2019-08-30 205327

 

こんな感じで、地図画像を画面コピーで投稿していたのです。

 

この画像部分にGoogleマップを貼り付けたい!!

 

そうすれば周辺情報を調べたりもできますし、訪れるためのナビゲーション代わりに使ってもらったりすることもできます。さっそく記事内のGoogleマップ貼り付けに挑戦してみましょう!

【広告】
ブログを始めるならサーバー選びからです。
公式サイト>>ロリポップ!

 

ブログ記事にGoogleマップを埋め込む方法

それでは、お題として滋賀県長浜駅前の「つるやパン まるい食パン専門店」の地図をこの記事内に貼り付けてみることにしましょう。順を追って説明します。

Googleマップサイトを開く

まずはGoogleマップを開きます。こちらのリンクからどうぞ。

Google Maps

Find local businesses, view maps and get driving directions …

マップを開くときは、ブラウザの新しいタブを使って開くと良いでしょう。

Googleマップサイトから共有リンクを取得する

次にGoogleマップ内からブログに貼り付けるためのHTMLコードを取得する作業を行います。まず、検索窓から目的である「まるい食パン専門店」を検索します。このようにお店が検索されます。

コメント 2019-10-11 145505

 

画面の右側にマップが表示されますので、正しい地点を指しているか確認します。そしてここで大事なのは赤枠で囲んだ左側のお店情報ウインドウです。このウインドウの「共有」ボタンをクリックします。

 

コメント 2019-10-11 144718

 

このように共有ウインドウが表示されます。ここから「地図を埋め込む」を選びます。

 

コメント 2019-10-11 144946

 

すると記事に貼り付けるためのHTMLタグが表示されます。左側には地図のサイズを「小」「中」「大」「カスタムサイズ」と選ぶタブがあります。こちらでサイズを選択すると、実際に貼り付けしたいサイズのサンプル地図が表示されます。

 

せっかくなので「大」を選んでみましょう。右の「HTMLをコピー」をクリックしてコードの取得は完了です。

WordPress記事内にGoogleマップHTMLタグを貼り付ける

それではWordpressの記事内にHTMLコードを貼り付けてみましょう。新規記事エディタを開き「テキスト」タブを選択し、先ほど取得したHTMLコードを貼り付けてみます。

コメント 2019-10-11 150742

 

このようにテキストエディタにHTMLコードを貼り付けてプレビューしてみると・・・

 

コメント 2019-10-11 150957

 

はい、記事内にGoogleマップを貼り付けることができました!

 

・・・が、地図が大きすぎてはみ出していますね。このままではスマホ表示したりするととんでもないことになってしまいます。そこで、地図をウインドウに合わせて縮小表示させる必要があります。

 

HTMLコードの最後にこちらのコードを追加します。

<style>iframe{max-width:100%}</style>

 

実際に追加したコードはこんな感じになります。お尻に追加コードを貼り付けるだけ。

コメント 2019-10-11 151813

 

これでウインドウ内にキレイに表示することができました!

 

どんな感じになるかというと・・・実際にコードを貼り付けておきます。↓こちらです↓

うん、いいんじゃないですか!


経路入りのマップを表示することもできます

無事地図の貼り付けができましたが、googleマップの醍醐味はナビ機能です。なんと、経路入りの地図も表示することができます。おまけとしてご紹介しましょう。

 

まずは目的地の検索後「ルート・乗換」をクリックします。

コメント 2019-10-11 152351

 

すると、目的地に対する出発地を入力するウインドウが現れます。

コメント 2019-10-11 152428

 

目的地は最初から登録されますので、出発地(○マークの方)を登録して検索を行います。ここではお試しに最寄り駅「長浜駅」を登録してみました。

コメント 2019-10-11 153051

 

このように右側のマップにルートが表示されます。左上のメニューボタン(三マーク)を押し、「地図を共有または埋め込む」を選びます。

 

後は先ほどの地図埋め込みの「共有」以降と同じ手順です。最後にstyleコードの追加を忘れないようにしましょう。実際に取得したタグコードを貼り付けておきましょう。

↓こちらです↓

さいごに


さて、googleマップの貼り付け方法はこれでバッチリですね!

 

ちなみにこのまるい食パン、僕が紹介した後でとあるドラマの中で紹介されたのだとか・・・。次回の記事では、滋賀県のとある蕎麦屋をマップ入りで紹介してみたいと思います。滋賀県のオススメ記事をお楽しみに!

活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください!


 

配信例はこちらにあります。

いいやん!
↑1いいやん!されています。良い記事でしたら「いいやん!」クリックお願いします。

下のSNSボタンから記事拡散にもご協力お願い致します。
読み込み中...

記事はいかがでしたか?
今後もぜひ応援をお願い致します!


最新情報をチェックしよう!
>活ノートでつながる。

活ノートでつながる。

記事にはお気軽にコメントをどうぞ!
ご意見、ご質問、記事の執筆依頼などなどお待ちしております。

ブログ『活ノート』シリーズ
・活ノート
・詐欺情報をまとめるブログ。by活ノート
・コミュボード。by活ノート

ブログランキングに参加中です。
順位の確認はこちらです。
人気ブログランキングブログランキング・にほんブログ村へFC2ブログランキング