Googleマップの「ストリートビュー」の貼り付けに対応しました - はてなダイアリー日記
なんて嬉しそうに報告しちゃってるけどさ、肝心の貼り付け方法を説明してないじゃないですかー。ということで相変わらずのはてなクオリティに苦笑しながら、はてな大好きなお兄さんがここで勝手に説明をしてみるよ！
0. 貼り付けたい場所の「ストリートビュー」を表示しよう
まず、Googleマップに行くよ！
ストリートビューを使うには、すっごく簡単に書くとこんな感じ：
- 「ストリートビュー」ボタンを押す
- 青くなってる道路の上でクリックすると
- 人型のアイコンが立ってストリートビューが表示されるよ
- マウスとキーボードで操作ができるので近くまで移動しよう
だいたいこんな画面になるよ
さあこれをはてなダイアリーに貼り付けてみよう
1. 埋め込み用のHTMLをコピペする
ストリートビューを表示したままでGoogleマップ右上の「リンク」というリンクをクリックする。すると、リンク用のURLとHTMLが表示される。
「別のサービスに埋め込む」なんて特別扱いを受けてるところもあるけどいまは気にしないで、このうち「HTML を貼り付けてサイトに地図を埋め込みます」って見出しの下のiframeタグのHTMLをダイアリーの編集画面にコピペする。これがけっこう長い。どのくらい長いかというとこのくらい。
<iframe width="425" height="240" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps/sv?cbp=1,250.01999999999975,,0,5&cbll=35.651591,139.698796&panoid=uEqQyedJEQvpAm0YX6Y1tg&v=1&hl=ja&gl=jp"></iframe><br /><small><a href="http://maps.google.co.jp/?ie=UTF8&ll=35.655797,139.702277&spn=0.010147,0.021093&z=16&layer=c&cbll=35.651591,139.698796&panoid=uEqQyedJEQvpAm0YX6Y1tg&cbp=1,250.01999999999975,,0,5&source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>
これをダイアリーの編集画面にコピペする。やることはこれだけ！
2. 完成
コピペして保存すると、こんな風に埋め込める
大きな地図で見る
これはただのキャプチャが貼ってあるんじゃなくってストリートビューそのものだから、マウスとキーボードでどんどん進むことができるよ！ キーボードショートカットが便利だから覚えておくといいかも。
| キー | 動作 |
|---|---|
| ↑ | 前進 |
| ↓ | 後退 |
| ←, Ctrl+A | 左を向く |
| →, Ctrl+D | 右を向く |
| PageUp, Ctrl+W | 上を向く |
| PageDown, Ctrl+S | 下を向く |
3. カスタマイズもできるよ！
さっきのリンク画面の「埋め込み地図のカスタマイズとプレビュー」ってところをクリックすると、こういうウィンドウがポップアップして、埋め込むビューのサイズを自由に変えられるよ！
これを使って違うサイズでも貼り付けてみたよ。
おまけ - 「別のサービス」を使ってるひとは
ところでさっきのリンク画面にあった「別のサービスに埋め込む」のボタンだけど、もちろんそのサービスを使ってるなら、そのボタンを押すとそのサービス用の日記編集画面が立ち上がるよ！
便利だねえ。
ちなみにまだストリートビューが見える町はそんな多くない。
日本だとまだこの地図で青くなってるところだけ。みんなの家はあるかな？
じゃ、どんどんストリートビューを楽しもうね。間違ってもラブホテルに入ろうとしているカップルや職質を受けてるひとを見つけて貼り付けるなんてことはやらないように。jkondoとの約束だよ！
