JQuery ajaxリクエストからGoogle Api Street Viewから画像を取得するにはどうすればよいですか？

Question

Google APIを使用してストリートビューを取得しています。

マイコード：

$.ajax({ 
     url: 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76&key=MY_KEY', 
     contentType: "image/jpeg", 
     type: 'GET', 
     cache: false, 
     success: function(data) { 
      console.log('got data', data); 
     }, 
     error: function(error) { 
      console.log('Error', error); 
     } 
     }); 

MY_KEYは私のGoogle APIキーであるとlocationは、特定の場所の緯度と経度ごとのような動的になります。 しかし、それはいつもerrorに入ります。 正常に実行されたら、htmlのimgタグでバインドします。

Answer 1

Google APIは生の画像データを提供します。ブラウザで表示するには、画像データをHTMLに設定する必要があります。

そうする方法はたくさんあります。昔はこの投稿を見ることができます - https://stackoverflow.com/a/20285053/926943 - この男の反応はちょうど素晴らしいです。

あなたの特定の問題について - 私はソリューションを作成するために上記の投稿を使用しました。

HTML：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> 
<div id="map_div"></div> 

JAVASCRIPT：

var imageUrl = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=23.7610974,90.3720526&heading=310"; 
convertFunction(imageUrl, function(base64Img){ 
     var img = "<img src='"+base64Img+"'>"; 
    $('#map_div').html(img); 
}); 

function convertFunction (url, callback){ 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
} 

JSFIDDLE：

https://jsfiddle.net/nagbaba/bonLzt67/

顔をしています

Answer 2

希望はこれが役立ちます、それはあなたのパラメータを交換することによって動作します：

https://developers.google.com/maps/documentation/javascript/examples/streetview-embed

が、それは代わりに、imgタグのdivの中にストリートビューが表示されます。