ブログの記事に地図(ストリートビュー)を載せる

google(グーグル)のサービスを使って
ブログの記事内に地図を載せる！
お店の案内などに最適ですね♪
リクエストが多いのでブログでもご紹介します。

1.googleマップにアクセス。

2.検索窓に該当する住所を入力。

3.「地図を検索」をクリック。
　←画像クリックで拡大表示して確認してみてください。

4.表示された地図の右上「リンク」をクリック。

5.表示されたオレンジ色のウィンドウから
「埋め込み地図のカスタマイズとプレビュー」をクリック。
　←画像クリックで拡大表示して確認してみてください。

6.表示された画面より、サイトに載せたい地図のサイズを選ぶ。

7.「サイトに地図を埋め込む場合はこのHTML をコピーして貼り付けます。」
より HTML をすべてコピー。
　←画像クリックで拡大表示して確認してみてください。
↑この画面は念のためブログを書き終えるまで閉じないほうが良いです。
操作間違いやうまくいかない場合、もう一度HTMLをコピーしたいとき便利です。

8.HTMLが取得できましたので、
続いてお使いのブログ管理ページを表示させます。

9.新しい記事を書く画面を表示させます。

◆忍者ブログの方
新しい記事を書く　画面
　←画像クリックで拡大表示して確認してみてください。

◆ＦＣ２ブログの方
新しい記事を書く　画面
　←画像クリックで拡大表示して確認してみてください。

10.取得した地図のHTMLをソース表示にして貼り付けます。

◆忍者ブログの方
「ソース」をクリックします
　←画像クリックで拡大表示して確認してみてください。

　←画像クリックで拡大表示して確認してみてください。
本文入力欄内で右クリック、「貼り付け」します。

◆ＦＣ２ブログの方
「タイトル」「カテゴリ」「ジャンル」...の下にある　アイコンが並んでいるバーから
Ｗ（高機能エディタ）のアイコンをクリックします。
　←画像クリックで拡大表示して確認してみてください。

「ソース」をクリックします。
　←画像クリックで拡大表示して確認してみてください。

本文入力欄内で右クリックし、「貼り付け」します。
　←画像クリックで拡大表示して確認してみてください。

※ＦＣ２ブログの方で
右クリックして「貼り付け」を選んでもうまくいかないことがあるようです。
うまくいかない場合は、もう一度　操作7.のHTMLをコピーを取る操作を行い
再度貼り付けてみてください。
1回目うまくいかなくても2回目でできることがありました。

11.記事を保存します

12.ブログ記事を確認します

◆忍者ブログの方
　←画像クリックで拡大表示して確認してみてください。
◆ＦＣ２ブログの方
　←画像クリックで拡大表示して確認してみてください。

確認できましたら、完成です♪


↓ブログ記事内にこんな風に貼りつきます



<sample>パソコン教室　一條学院

拡大地図を表示


google
ウェブサイトやブログに地図を埋め込む方法
ヘルプはこちらから

---

ここからは応用編！！

●地図の尺度を変えたい！
●ストリートビューを貼り付けたい！

そんな人にオススメです。

---

●地図の尺度を変えたい！
「埋め込み地図のカスタマイズとプレビュー」の画面で
表示される地図の、倍率や位置をあらかじめ調節してから
ＨＴＭＬを取得します

　　←画像クリックで拡大表示して確認してみてください。
「サイトに地図を埋め込む場合はこのHTML をコピーして貼り付けます。」
より HTML をすべてコピーでコピーを取り、
先ほど貼り付けた要領で貼り付けるとこうなります↓倍率が変わっています。

大きな地図で見る


●ストリートビューを貼り付けたい！

左上のオレンジ色の人形を目的の場所にドラッグします
　←画像クリックで拡大表示して確認してみてください。
ストリートビューが対応している道は
ブルーの色が付きます。
　←画像クリックで拡大表示して確認してみてください。
名古屋市内ですとほとんどの道が対応しています。
愛知県外では、まだ大通りだけという感じです。

　　　　googleストリートビュー対応エリア　コチラから確認できます

地図がストリートビューで表示されます
　←画像クリックで拡大表示して確認してみてください。
右上の「リンク」から、先ほど地図のＨＴＭＬを取得した要領で
ＨＴＭＬを取得します
　←画像クリックで拡大表示して確認してみてください。
続きの操作も地図の場合と同じです。
↓こうなります


大きな地図で見る