ハマログ

株式会社イーツー・インフォの社員ブログ

StreetView Image APIで、画像がないときに代替画像を表示する方法

Street View Image APIを利用すると、JavaScriptのコードを書かずにストリートビューの画像をウェブサイトに埋め込むことができます。

こんな感じです。
streetviewimagee2info

指定した位置のストリートビューが取得できなかった場合、以下のような表示になります。ちょっとそっけないですね。
20160920-210932

公式のやり方かわからないのですが、この画像を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が表示されるようになりました。

APIGoogleGoogle Map APIMapStreet ViewWEB APIストリートビュー

  kaneko tomo   2016年10月1日


関連記事

Laravel 8.* のフォームリクエストでバリデーションチェック済みの値を整形してみる

突然ですが、フォームリクエストでバリデーションチェック済みの値を整形する必要に出…

ChatGPTに最近調査した課題内容貼り付けてブログ記事作ってもらった:その1

ブログネタに困っていたところ、タイトルのようなネタを書いてみればとアドバイスいた…

iOSアプリケーションの審査通過後の公開時期

こんにちは、かねこです。 花粉の季節、いかがお過ごしでしょうか。 はじめに 会社…


← 前の投稿

次の投稿 →