Webサイトにストリートビューを表示する

どんどん便利になっていくなぁ。

【仕様】
#mapAddressに住所が入っている
#gMapに地図を表示する
#gViewにストリートビューを表示する

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': $('#mapAddress').val(),'region': 'jp'},
  function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      // 緯度・経度取得
      var latlng=results[0].geometry.location;
      // 地図のオプション設定
      var mapOptions = {
        zoom: 16, /*初期のズーム レベル */
        center: latlng, /* 地図の中心地点 */
        mapTypeId: google.maps.MapTypeId.ROADMAP /* 地図タイプ */
      };
      // 地図表示
      var map=new google.maps.Map(document.getElementById('gMap'), mapOptions);

      // 地図のマーカーオブジェクト 
      var marker = new google.maps.Marker({
        position: latlng, /* マーカーを立てる場所の緯度・経度 */
        map: map /*マーカーを配置する地図オブジェクト */
     });

      // ストリートビュー表示
      var svp = new google.maps.StreetViewPanorama(
        document.getElementById('gView'),{
          position : map.getCenter()
        }
      );

      // ストリートビュー調整
      var nearestLatLng = null, nearestPano = null;
      var client = new google.maps.StreetViewService();
      var radius = 100;
      client.getPanoramaByLocation(latlng, radius, function(result, status) {
        if (status == google.maps.StreetViewStatus.OK) {
          var location = result.location;
          nearestLatLng = location.latLng;
          svp.setPosition(nearestLatLng);
        }else{
          //近くにストリートビューがない場合表示箇所隠す
          document.getElementById("gView").style.display = 'none';
        }
      });
    }
  }
);

head内にこれを入れる。

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

JavaScript本格入門　?モダンスタイルによる基礎からAjax・ｊQueryまで