google mapの地図をブログに貼付するのは簡単です。マップから取得した iframeタグを挿入するだけ。
但し，マップのサイズがpx指定なので，レスポンシブに対応してません。スマホで見るとはみ出すことも。
そこで取得したタグをレスポンシブ対応に少し書き換えます。今回はテンプレートのcssをイジらずに，簡単にレスポンシブに対応する方法をまとめてみます。
(1) Google mapからタグを取得
google mapで，ブログに埋込みたい地図を表示させる。縮尺も調整する。
左サイドメニューの [ 共有 ] をクリックすると，ウインドウが開く。[ 地図を埋め込む ] タブを選択し，iframeタグを取得する。
マップのサイズもここで指定できるが，あとで修正するので特にこだわらない。
(2) ブログ内に貼り付け
取得した iframe タグをブログ内に貼り付ける。width と height でマップのサイズが指定されている。
<iframe src="マップのＵＲＬ " width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
(3) divタグを追加
この divタグで，iframeタグを囲む。
<div style="height: 0; overflow: hidden; padding-bottom: 75%; position: relative; width: 90%;">
width は横幅を表示範囲の割合で指定。
padding-bottom で横幅に対する縦の割合を指定する。正方形なら100%，4:3の割合なら75%，16:9の割合なら56.25%となる。
(4) iframeタグの修正
divタグにぴったりハマるサイズを iframeタグで指定するために，URL以外の部分を このstyleの記載に修正する。
style="border: 0; height: 100%; width: 100%; top: 0; left: 0; position: absolute;"
Google ストリートビューの画像も同様に，メニューの [ 画像を共有または埋め込む ] から iframe タグを取得して，ブログに埋め込むことができます。
