【Wordpress】ブログ記事にGoogleマップをキレイに貼る方法
katsuです。
今回の「ブログ作成備忘録」では、ブログの記事にGoogleマップを上手く貼り付ける方法をまとめておきたいと思います。
例えば記事内でどこかのお店を紹介したり、観光地を紹介したりする場合、地図を添付しておきたいものです。これまではこんな感じで、公式サイトに掲載されている地図をお借りしたりしていました。
例えば長浜駅前のまるい食パン専門店さん。
そして東京中野のTHE WATCH COMPANYさん。
こんな感じで、地図画像を画面コピーで投稿していたのです。
この画像部分にGoogleマップを貼り付けたい！！
そうすれば周辺情報を調べたりもできますし、訪れるためのナビゲーション代わりに使ってもらったりすることもできます。さっそく記事内のGoogleマップ貼り付けに挑戦してみましょう！
【広告】
ブログを始めるならサーバー選びからです。
公式サイト＞＞ロリポップ！
ブログ記事にGoogleマップを埋め込む方法
それでは、お題として滋賀県長浜駅前の「つるやパン まるい食パン専門店」の地図をこの記事内に貼り付けてみることにしましょう。順を追って説明します。
Googleマップサイトを開く
まずはGoogleマップを開きます。こちらのリンクからどうぞ。
マップを開くときは、ブラウザの新しいタブを使って開くと良いでしょう。
Googleマップサイトから共有リンクを取得する
次にGoogleマップ内からブログに貼り付けるためのHTMLコードを取得する作業を行います。まず、検索窓から目的である「まるい食パン専門店」を検索します。このようにお店が検索されます。
画面の右側にマップが表示されますので、正しい地点を指しているか確認します。そしてここで大事なのは赤枠で囲んだ左側のお店情報ウインドウです。このウインドウの「共有」ボタンをクリックします。
このように共有ウインドウが表示されます。ここから「地図を埋め込む」を選びます。
すると記事に貼り付けるためのHTMLタグが表示されます。左側には地図のサイズを「小」「中」「大」「カスタムサイズ」と選ぶタブがあります。こちらでサイズを選択すると、実際に貼り付けしたいサイズのサンプル地図が表示されます。
せっかくなので「大」を選んでみましょう。右の「HTMLをコピー」をクリックしてコードの取得は完了です。
WordPress記事内にGoogleマップHTMLタグを貼り付ける
それではWordpressの記事内にHTMLコードを貼り付けてみましょう。新規記事エディタを開き「テキスト」タブを選択し、先ほど取得したHTMLコードを貼り付けてみます。
このようにテキストエディタにHTMLコードを貼り付けてプレビューしてみると・・・
はい、記事内にGoogleマップを貼り付けることができました！
・・・が、地図が大きすぎてはみ出していますね。このままではスマホ表示したりするととんでもないことになってしまいます。そこで、地図をウインドウに合わせて縮小表示させる必要があります。
HTMLコードの最後にこちらのコードを追加します。
実際に追加したコードはこんな感じになります。お尻に追加コードを貼り付けるだけ。
これでウインドウ内にキレイに表示することができました！
どんな感じになるかというと・・・実際にコードを貼り付けておきます。↓こちらです↓
うん、いいんじゃないですか！
経路入りのマップを表示することもできます
無事地図の貼り付けができましたが、googleマップの醍醐味はナビ機能です。なんと、経路入りの地図も表示することができます。おまけとしてご紹介しましょう。
まずは目的地の検索後「ルート・乗換」をクリックします。
すると、目的地に対する出発地を入力するウインドウが現れます。
目的地は最初から登録されますので、出発地（○マークの方）を登録して検索を行います。ここではお試しに最寄り駅「長浜駅」を登録してみました。
このように右側のマップにルートが表示されます。左上のメニューボタン（三マーク）を押し、「地図を共有または埋め込む」を選びます。
後は先ほどの地図埋め込みの「共有」以降と同じ手順です。最後にstyleコードの追加を忘れないようにしましょう。実際に取得したタグコードを貼り付けておきましょう。
↓こちらです↓
さいごに
さて、googleマップの貼り付け方法はこれでバッチリですね！
ちなみにこのまるい食パン、僕が紹介した後でとあるドラマの中で紹介されたのだとか・・・。次回の記事では、滋賀県のとある蕎麦屋をマップ入りで紹介してみたいと思います。滋賀県のオススメ記事をお楽しみに！
活ノートでは最新記事の投稿情報をメールでお伝えしています。お気軽にご登録ください！
配信例はこちらにあります。
