2012/05/16 (Wed) Google map の使い方と、サイトやブログへの埋め込み方

前の記事で著作権問題をクリアできる無料写真配布サイトやWikipedia に投稿された写真を転用する方法を書きましたが、ここまで書いたらついでにGoogle map をサイトやブログに埋め込む方法も書いておこうかなと思います。

Google の検索トップページに探したい町や地域の名前、住所などを記入した後、ページの左上にあるリンクから地図を選ぶと、Google map が表示されます。

Google map ( Wikipedia 日本語版)
Google ストリートビュー( Wikipedia 日本語版)

例として、ここでは「ベルリン」と記入して地図をクリックしてみます。
はっきりした住所を入れて検索すると、その地域の地図が出てきます。
下の画像の赤丸が地図のリンクです。
ちょうど母の日だったので、ロゴがいつもと違います。

せっかくなので、ついでに「もっと見る」の中に入っているリストも出してみました。
リストの中に入っている「翻訳」は、単語なら結構役に立ちます。
文章になると、奇奇怪怪な翻訳になっちゃいますけど（苦笑）

町や地域の名前や住所を入れて、地図をクリックする


検索結果が出て、ベルリン地区の地図が表示される

• 地図は拡大して家並みにしたり、縮小して世界を見ることもできます。マウスをスクロールすることでも拡大縮小ができます。
• 左上の円盤は上下左右に動くためですが、マウスを地図の上で左クリックしたまま動かしても移動させることができます。
• 左側の黄色い人型はストリートビューや投稿された写真を見るためで、マウスを左クリックそたまま道路に持って行くと、道路に青いラインができるところではストリートビューが見られます。
• 右上には地図への切り替えボタンがあり、ここにマウスを持って行くと、Google Earth への切り替えボタンも出てきます。
• Gogle Earth は、有名な場所では地図を3Dで見ることもできます。

Google map はストリートビューが見られますが、その使い方を知らない方用にちょっと説明を書いておきます。
ストリートビューとは、Google が世界の主要都市の道路を複数のカメラを搭載した車で走り、撮影した写真をGoogle map で公開しているサービスです。

自宅を勝手に撮られたとか、歩行者の顔がはっきり分かるなどのプライバシー問題を受けて、車のナンバーや人物の顔などにぼかしが入るようになりましたが、ストリートビューのメリットは旅行先の様子を詳しく見られること。
パリに予約したホテルの周りにスーパーがあるかどうかとか、駅からどの道を行けば目的地に行けるかとか、実際に目印になる建物をその場所に行く前に確認できるので、向こうに行っても迷うことがない。
私も、旅行の前には必ずストリートビューでホテルやスーパー、レストランなどの位置を確認してます。

ストリートビューの表示の仕方は簡単です。
地図の左側にある黄色い人型を、マウスを左クリックしたまま地図上に移動させてきてください。そうすると、ストリートビューがある道路に青いラインが出てきます。
これは、ここをGoogle のストリートビュー撮影車が通ったということ。
私も撮影車を見かけた頃があるのですが、車の横に大きく「Google」と書いてありました。
ということは、私もストリートビューのどこかに映ってたりして・・・

道路上のライン部分がストリートビューできる道で、点はその場所の写真

人型が置かれた場所のストリートビューが出てきたら、カメラの方向を調節してください。

• 画像左上の円盤の矢印をクリックすると、左右上下に画像が移動します。
• 道路上にある白い矢印をクリックすると、道路を前に進んだり、曲がったりします。世界のある場所を、ストリートビューを見ながら疑似体験するとができる訳です。
• 投稿写真がその場所にある場合は、写真マークが出てきます。これをクリックすれば、ユーザーが投稿した写真を見ることもできます。
• ストリートビューから元の地図に戻りたい時は、右上の×をクリックすれば戻ります。

ストリートビューでベルリンのブランデルブルグ門の前に立ってみた

WIkipedia より、２０１０年にドイツで公開されたGoogle の新しいストリートビュー撮影車

Google がストリートビューに関しての詳しい説明を自サイトに載せています。
使い方やストリートビューの見られる場所などの他に、面白い話も載っていますので、ここの記事で使い方が分かった方も分からなかった方も（＾＾；）読んでみてください。
Google マップ　ストリートビュー解説サイト


さて、次はGoogle map の貼り付け方ですが、長くなるので追記に入れてあります。
サイトやブログの中にGoogle map を埋め込んでみたい方は、追記をお読みください。

さて、それでは地図の貼り付け方です。
Google map の左上にリンクのボタンがあるので、これをクリックします。
すると横に、そのページのURLと埋め込み用コードが出てきます。
サイトをお持ちの方はお分かりだと思うので、ここから先はブログに地図を貼り付けたい方用に説明します。

リンクボタンを押すと、埋め込み用コードが出てくる


ページへのURLと埋め込み用コード

文字リンクにしたい場合は上のコードを、地図を埋め込むなら下のコードをコピーします。
埋め込みコードをコピーしたら、エディターをHTMLにして、お好きなところに貼り付けます。
注）エディターのHTMLへの切り替えは前回の「Wikipedia の写真をサイトやブログに活用しよう」の追記で説明していますので、切り替え方を知らない方は前記事をお読みください。

貼り付けた地図は下のように表示されます。
地図を拡大してからリンクボタンをクリックすると、埋め込む地図も拡大されています。


大きな地図で見る　ベルリン広域の地図


大きな地図で見る　ベルリンを拡大した地図

あれ？と思った方がいますね？
そう、マップのサイトでは出ていなかった吹き出しが、埋め込んだ地図ではドバッと大きく出てきていて、それも上部が切れているから何が書いてあるのか読めない。

地図をマウスか左上にある矢印で動かして、吹き出しが見えるところまで移動させれば読めますが、吹き出しなんかないほうがいいと思う方もいるはず。
じゃあ、吹き出しを消すにはどうしたかいいのか？

吹き出しを消すには、ちょいと手作業が必要になります。
まず、埋め込み用のコードをコピーしてメモ帳やノートパッドに貼り付け、最初のカギ括弧（＜　　＞）の最後のところ、</iframe>の前に「&iwloc=B」を加えます。
下にベルリンの地図のコードを持ってきました。赤字が追加したところです。

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?hl=ja&amp;q=%E3%83%99%E3%83%AB%E3%83%AA%E3%83%B3&amp;ie=UTF8&amp;hq=&amp;hnear=%E3%83%99%E3%83%AB%E3%83%AA%E3%83%B3+%E3%83%89%E3%82%A4%E3%83%84&amp;ll=52.519171,13.406091&amp;spn=0.034314,0.090895&amp;t=h&amp;z=14&amp;brcurrent=3,0x0:0x0,0&amp;output=embed&amp;iwloc=B"></iframe><br /><small><a href="http://maps.google.co.jp/maps?hl=ja&amp;q=%E3%83%99%E3%83%AB%E3%83%AA%E3%83%B3&amp;ie=UTF8&amp;hq=&amp;hnear=%E3%83%99%E3%83%AB%E3%83%AA%E3%83%B3+%E3%83%89%E3%82%A4%E3%83%84&amp;ll=52.519171,13.406091&amp;spn=0.034314,0.090895&amp;t=h&amp;z=14&amp;brcurrent=3,0x0:0x0,0&amp;source=embed" style="color:#0000FF;text-align:left">大きな地図で見る</a></small>

このコードをコピーして埋め込んでみると、邪魔な吹き出しが出なくなりました。
マーカーの赤いAをクリックすると、吹き出しがまた出てきます。
このほうがすっきりしてますね。

地図の右上には「地図」、「写真」、「地形」、「Earth」の切り替えボタンが並んでいます。
それぞれを押して、変化を見てみましょう。


大きな地図で見る　吹き出しのない地図


吹き出しもマーカーも消したい場合、または複数のマーカーが邪魔な場合は、消し方を下のサイトで詳しく説明していますので、こちらをお読みください。
Google マップの埋め込み HTML でふきだしを消す方法（新）

ここに紹介した吹き出しの消し方も、同じサイトを参照しています。
Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法