StreetView Image APIで、画像がないときに代替画像を表示する方法
Street View Image APIを利用すると、JavaScriptのコードを書かずにストリートビューの画像をウェブサイトに埋め込むことができます。
指定した位置のストリートビューが取得できなかった場合、以下のような表示になります。ちょっとそっけないですね。
公式のやり方かわからないのですが、この画像をJavaScriptで置き換えることができました。以下のJavaScriptコードを記載します。
<img id="street_view" alt="テスト" width="260" height="130" src="https://maps.googleapis.com/maps/api/streetview?size=260x130&location=【lat】,【lon】&heading=0&pitch=0&fov=100&zoom=1&key=【API Key】"/> <script> <!-- targetLatLng = new google.maps.LatLng(【lat】,【lon】); var streetViewService = new google.maps.StreetViewService(); streetViewService.getPanoramaByLocation(targetLatLng, 50, function(result, status) { if (status !== google.maps.StreetViewStatus.OK) { $("#street_view").attr("src", "/img/street-view-noimage-260-130.png"); } }); --> </script>
これで、画像が表示できない場合、/img/street-view-noimage-260-130.pngが表示されるようになりました。