JavaScript

Google マップのストリートビューを実装してみました!!

Google マップのストリートビューを実装してみました。

 

ソースはこんな感じ↓↓で、意外と簡単に実装できました。

<!DOCTYPE html>
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<script language="JavaScript">

function view_load(){

//都庁周辺のストリートビューを表示してみます
var latlng = new google.maps.LatLng(35.690551, 139.69257);

//ストリートビューを表示
var viewOptions = {
position:latlng,
pov: {
heading: 190,
pitch: 30,
zoom: 0
}
};

var view = new google.maps.StreetViewPanorama(document.getElementById("street_view"), viewOptions);
view.setVisible(true);

}

</script>
</head>
<body onload="view_load();">

<div id="street_view" style="width:450px;height:350px;"></div>

</body>
</html>

ストリートビューは、StreetViewPanoramaクラスを使って表示させます。

まず、パノラマのオプションを設定してやります。

 

viewOptions = { ~

の部分です。

 

headingは「方角」
pitchは「カメラの向き」
zoomは「ズーム」
を設定してやります。
※プロパティは他にもいろいろあるので調べてみてください。

 

この辺は調整しながら最適の値を設定してやってください。

 

で、

あとは

var view = new google.maps.StreetViewPanorama(document.getElementById("street_view"), viewOptions);
view.setVisible(true);

としてやれば、

都庁周辺のストリートビューを表示してくれます。

 

因みに、日本にはまだまだストリートビューに対応していない地域もあります。

その場合には、getPanoramaByLocation()メソッドを使って適切に処理をしてやってください。

その説明は以下になります。
getPanoramaByLocation()メソッド ]

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

アーカイブ

PAGE TOP