緯度経度からストリートビューで建物の画像を取得する

この記事は

• 建物の緯度経度だけがわかっている状況から、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が表示されます
• それを開いてみたのがこちら
• きたー

終わりに

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