こんにちはネコ部長です。
旅行先や観光地などを ブログ記事で紹介するときに、その場所の地図を入れることがありますが、PC初心者やブログ初心者では、表示のさせ方が分からないといったことがありませんか？ちなみに私も知りませんでした。
そこで今回は、誰にでも簡単にGoogleマップをはてなブログに埋め込む簡単な方法があるので紹介したいと思います。
Googleマップを埋め込む方法
1-1.埋め込みたい場所を表示させる
まずは、Googleマップを開いて、旅行先や観光地などの住所を入力します。
試しに、ここでは京都駅にしてみます。すると次にような画面になります。
1-2.「共有」を押す
次は、「共有」（赤線）のところをクリックすると、共有方法が出てくるので、
「地図を埋め込む」（赤線）のところをクリックしてください。
1-3.「HTMLコード」をコピーする
「地図を埋め込む」のところをクリックすると次のような表示が出てきます。
この中にある「HTMLをコピー」のところをクリックしてコードをコピーします。
1-4.はてなブログの「HTML編集」でペーストする
そして最後は、コピーしたコードを「HTML編集」のところで埋め込みたい記事の
段落部分にペーストします。すると、次のように表示されます。
どうでしょうか。とても簡単に地図を埋め込むことができますね。
地図の大きさを決める
地図には大きさが4種類あるので、表示させたい地図のサイズを決めてみましょう。
「小」・・横400px 縦300px
「中」・・横600px 縦450px
「大」・・横800px 縦600px
「カスタマイズ」は自由に数字を入れて、大きさを調整してください。
また、紹介したい地図の大きさは、その時の記事のイメージに合ったものを
選ぶようにしましょう。
経路付きの地図を埋め込む
次は応用編で、車などでの経路付きの地図を埋め込む方法です。
それでは、京都駅から清水寺までの車での経路を入れてみましょう。
2-1.「ルート・乗換」を押す
最初の画面の左側にある小窓に、「ルート・乗換」のところがあるので
そこをクリックします。
2-2.出発点と行先を決める
「ルート・乗換」をクリックすると、出発点と行先の情報を入力する画面に
なるので、今回は「車マーク」で京都→清水寺の情報を入れます。
2-3.あとの手順は一緒です
情報を入力して検索をかけると、地図上に経路が表示されますので、左上の3本線
をクリックすると次のような表示に変わります。
赤線のところをクリックすれば、「1-2」の画面が表示されるので、
あとの手順は最初の地図を埋め込む方法と一緒となります。
どうでしょうか。
他にも、電車や徒歩、自転車などの移動経路を表示させ、それを簡単にブログに
埋め込むことができます。
まとめ
ブログにGoogleマップが埋め込まれていると、ユーザーにとってはとても助かる
ことと思います。あとは、コンテンツに合わせた大きさや、移動手段による経路
地図も使い分けていけば、より質の高い記事になると思います。
それでは、ブログにGoogleマップを埋め込む簡単な方法を紹介しました。
ご覧いただきありがとうございました。
