Googleマップのストリートビューを埋め込み

2013年3月23日

最近、きまっし金沢関連のサイトの地図のリンク先をMapionからGoogleマップに変更したのですが、Googleマップの多機能さに驚くばかりです。衛星による航空地図を表示できる事は、よく知られていますが、Googleマップの地図をWEB上に表示できたり、出発地点から目的地への最短ルートの検索で距離と時間が表示させることができたりもします。希望の場所での360度の画像を見ることができるストリートビューもできました。

自分のサイトにGoogleマップのストリートビューを表示させる方法を調べてみました。
Googleマップのストリートビューの対象地域を調べ、ストリートビューの対象地域ならその地点のストリートビューをホームページに埋め込むことができます。
Googleマップでストリートビューを表示させい地点を表示します。地図上に航空写真と地図を切り替えるボタンと、交通情報や写真、ウェブカメラなどを選択するボタンがあるので、交通情報や写真、ウェブカメラなどを選択するボタンで、ウェブカメラのところにチェックを入れます。
縮尺を最拡大して表示しているGoogleマップ上で、ストリートビューしている地点をダブルクリックすると、ストリートビューがあるところだとストリートビューが表示されます。
右下に地図が表示された補助窓があるので左上の矢印をクリックすると地図が大きくなります。
地図上にストリートビューのカメラの位置のマークがあるので、そのマークを左クリックしたまま移動(ドラッグ)させるとストリートビューの対象地点が青色で表示されます。青色で表示された位置の中で希望の位置に、マークをドラッグして移動すると移動した地点のストリートビューを見ることができます。
自分のホームページに表示したい場合は、Googleマップのリンクのボタン(∞ のようなボタン)をクリックします。そのままウェブサイトへの地図埋め込み用 HTML コードをコピーしてペーストしてもよろしいですが、大きさなどを希望通りにして埋め込みたい場合は「埋め込み地図のカスタマイズとプレビュー」をクリックして大きさを指定します。
HTML コードをコピーしてホームページにペーストすれば出来上がりです。HTML コードをコピーできない場合は、コピーするHTMLコードを選択してキーボードでCtrlキーとCキーを同時に押すとコピーできます。

これで大丈夫かなと思ったら、地図の表示範囲がずれてしまいました。


大きな地図で見る

地図を小さくするとちゃんと撮影地点が表示されるのですけど。


大きな地図で見る

WordPressのブログにGoogleマップのストリートビューを埋め込むと、ブログのトップページに来た時に、Googleマップのストリートビューを埋め込んだ位置に自動的にスクロールされてしまうようです。都合悪いです。

2013年10月3日

「ここを地図の中心にするに設定する」に設定してから、ウェブサイトへの地図埋め込み用 HTML コードをページに埋め込めば大丈夫だと聞いたので、試してみようと思っていたのですが、最近、Googleマップのストリートビューが不安定で、Googleマップのサイトでもストリートビューが見れない事が多かったのです。Googleマップのストリートビューが落ち着いたので、試してみたら、以前地図の表示範囲がずれていたものも正常に表示するようになっていました。
ストリートビューが不安定だった時に、いろいろな不具合を修正していたのかもしれません。


大きな地図で見る

2013年10月6日

やっぱり思うように表示されませんでした。



コメントを残す

メールアドレスが公開されることはありません。