ホーム HTML Tips 頭の体操 お役立ちソフト 視 角 掲示板! リンク




5分で作る Google ストリートビュー


最近、何かと話題の Google ストリートビューですが、使ってみたらなんと、自分の家の前まで見られるじゃありませんか(笑)。

感動したついでに Google Maps API を使って自分のサイトに Google ストリートビューとマップを付けてみようかと思ったのですが、 場所やカメラアングルの設定が予想外に面倒臭い。そこで、誰でも簡単に自分のサイト用の Google ストリートビュー&マップを作れるプログラムを書いてみました。

誰でも作れるといっても、Google ストリートビュー&マップは公開サイト上でなければ正常に動作しないようなので、 自分のサイトを持っていることが条件になります。また、Google のアカウントとGoogle Maps API キーを持っていなければなりません。

以下のステップに従って、作ってみてください。

  1. Google のアカウントがない場合は、Google のサイトで取得します。 また Google Maps API キーを持っていない場合は、「Sign Up for the Google Maps API」のページから取得してください。
  2. 下の設定用マップで地図とストリートビューの表示地点を決めます。ストリートビューを表示できるのは、マップ上で青く囲まれた地域だけです。 「地域を検索」で住所を指定するか、マップを拡大しながら表示地点を見つけてください。
  3. マップ上に赤いマーカーのある地点が、ストリートビューの表示地点です。マーカーをドラッグ&ドロップすると、ストリートビューもその地点に移動します。 (青く囲まれていない場所にはドロップできません。)また、ストリートビュー上を方向マークで移動すると、マップ上のマーカーも移動します。
  4. 地点を決めたら、今度はカメラアングルを決めます。ストリートビュー上のボタンをクリックしたり、 ストリートビューをドラッグしたりしながら、カメラの水平アングル、垂直アングル、ズームレベルを決めてください。
  5. マップとストリートビューのサイズを変えたい場合は、サイズを入力して「変更」ボタンで変えます。 あまり小さくすると正常に表示されなくなるので、最低1辺 300 ピクセルはあった方が良さそうです。
  6. マップのサイズが小さい場合、「ボタンとスライダー」を「小」か「無し」、 「マップタイプボタン」を「ドロップダウンメニュー」か「無し」にすると、マップからはみ出しません。
  7. 設定がすべて済んだら、取得済み Google Maps API キー、使用する文字コード、ページタイトルを入力し、 「決定してソースを作成」ボタンをクリックします。作成された HTML ソースをコピーしてファイルを作成し、サーバにあげて動作を試してみてください。

マップのデータ

  1. サイズ:横 ×縦
  2. マップタイプ:地図
  3. ズームレベル:4
  4. マーカーの緯度:43.060733
  5. マーカーの経度:141.353627

オプション

  1. ボタンとスライダー
  2. マップタイプボタン
  3. 表示するマップタイプ
    スケールを表示

ストリートビューのデータ

  1. サイズ:横 ×縦
  2. ビューの緯度:43.060733
  3. ビューの経度:141.353627
  4. カメラの水平アングル:80
  5. カメラの垂直アングル:0
  6. カメラのズームレベル:0

Google Maps API キー

使用する文字コード(utf-8、shift-jis、euc-jp など)

ページタイトル


Google のマップはまだまだ色々なことができますが、興味のある方は「Google Maps API」のページで研究してみましょう。




次のトピックは未定です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで