この記事は

建物の緯度経度だけがわかっている状況から、Googleストリートビューを使ってその建物の画像を取得してみたので備忘録です

やりたかったこと

単純に建物の緯度経度をずらっと持っていて、その建物の画像を入手したかったです
今回は仮にジロリアン希代の名店ラーメン二郎目黒店の外観画像を入手したかったと仮定しておきます

Street view static API

もともとGoogleが緯度経度から画像を取得するAPIを準備しています
GCPの設定で上記APIを有効化すると使えます
こんな感じでURLを組み立てれば表示ができるようで、おおこれだ！となりました

https://maps.googleapis.com/maps/api/streetview?size=400x400&location=40.720032,-73.988354
&fov=90&heading=0&pitch=10
&key=YOUR_API_KEY

しかし

うきうきしながらジオコーディングサイトで、ラーメン二郎目黒店の住所を 35.634192, 139.707051 の緯度経度に変換して、上記URLに入れ込んでみました

道ですね
どうやら上記URLの heading というパラメータがカメラの角度を示しているみたいです
デフォルト0 (=真北) なので全然違う方向を向いちゃってるわけですね

headingを計算する

ブラウザから該当の緯度経度をストリートビューで表示すると、いい感じに建物が表示されているのですが、このAPIはそこまで親切ではないようです
どうも自分で角度を計算して指定する必要があるっぽい
で、その辺りを作ったのが下記コードです
- 下記では１件だけですが複数件まとめて順序通り取得できるようにPromiseとかasync/awaitかましたりしてます
- このへんは必須ではありません


var latlngs = [
  [35.634192, 139.707051] //ラーメン二郎目黒店
];

var service = new google.maps.StreetViewService();
async function start() {
  for(var i = 0; i < latlngs.length; i++) {
      var latlng = latlngs[i];
      var lat = latlng[0];
      var lng = latlng[1];
      var targetLatLng = new google.maps.LatLng(lat, lng);
      await new Promise(function(resolve) {
        service.getPanoramaByLocation(targetLatLng, 1000, function(panoData){
            panoramaLatLng = panoData.location.latLng;
            var heading = google.maps.geometry.spherical.computeHeading(panoramaLatLng, targetLatLng);
            var url = "https://maps.googleapis.com/maps/api/streetview?size=1024x1024&location=" +
              lat + "," + lng +
              "&fov=90&heading=" + heading +
              "&pitch=10&key=YOUR_API_KEY"
            console.log(url);
            resolve();
        });
      })
  }
}
start();

ポイントは下記でheadingを計算しているところです
撮影地点の緯度経度と建物の緯度経度を付き合わせて、グリッと回す角度を計算してくれてるみたいです

var heading = google.maps.geometry.spherical.computeHeading(panoramaLatLng, targetLatLng);

これを実行するとJavaScriptコンソールにURLが表示されます
それを開いてみたのがこちら
きたー

終わりに

これでいろんな二郎の外観画像をたくさん収集できますね
巡礼系のサイト作ったりするときに役にたつかもしれません