グーグルマップのストリートビューを適切に表示したい

質問

はじめまして。
ウェブプログラミング初心者です。

ビルの情報を集めたウェブサイトを制作中の者です。

それぞれのビルのグーグルマップとストリートビューを表示したいのですが、
ストリートビューで建物内の店舗が表示されるものがあり
どのように調整したらよいか困っています。
道路を表示させるための記述などあるのでしょうか。

下記にソースを添付させていただきます。
ご教示いただければ幸いです。
何卒どうぞよろしくお願いいたします。

<!-- 住所から緯度経度を取得する -->
<?php
$query =$address;
$query = urlencode($query);
$url = "http://www.geocoding.jp/api/";
$url.= "?v=1.1&q=".$query;

$fp = fopen($url, "r");
while(!feof($fp)) {
$line.= fgets($fp);
}
fclose($fp);
$xml = simplexml_load_string($line);
?>

<!-- 取得した緯度経度をJavaスクリプト内に入れて地図とストリートビューを表示 -->
<script type="text/javascript">
// 変数群
var map,svp;
//--------------------------------------------
//初期設定(ページを読み込んだ時に実行する関数)
//--------------------------------------------
function initialize() {
// 緯度・経度変数
var latlng = new google.maps.LatLng(<?php echo $xml->coordinate->lat; ?>,<?php echo $xml->coordinate->lng; ?>);
// 地図のオプション設定変数
var myOptions = {
// 向き
heading: -20,
// 初期のズーム レベル
zoom: 17,
draggable: false,
// 地図の中心点
center:latlng,
// 地図タイプ
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//地図オブジェクト生成
map = new google.maps.Map(document.getElementById('map'), myOptions);
// ストリートビューオブジェクト生成
svp = new google.maps.StreetViewPanorama(
document.getElementById('svp'),{
position : map.getCenter()
});
// ストリートビューオブジェクト詳細設定
svp.setPov({heading: -20, pitch: 0, zoom: 0});
// マップとストリートビューの一致させる為の記述
map.setStreetView(svp);
} // function initialize()
// ページを読み込んだ時にinitialize()を実行
google.maps.event.addDomListener(window, 'load', initialize);
</script>

回答No.2

やぎ じじい（@yagijijii）

逆に情報提供頂き、ありがとうございます。

location: point,
radius: 50, //検索半径、数値も変えてみた
preference: google.maps.StreetViewPreference.NEAREST,
source: google.maps.StreetViewSource.OUTDOOR

としており、東京駅付近で試しているのですが、少し道路から
離れた所をクリックするとインドアを拾ってしまいます。
当方としては、インドアを完全排除したいのですが。

回答No.1

やぎ じじい（@yagijijii）

＞それぞれのビルのグーグルマップとストリートビューを表示したいのですが、
＞ストリートビューで建物内の店舗が表示されるものがあり
＞どのように調整したらよいか困っています。
＞道路を表示させるための記述などあるのでしょうか。

私も同様の問題に当り、こちらの情報を参考にしましたが、うまくいきません。
http://d.hatena.ne.jp/scientre/20150331/streetview_image
要はインドアとアウトドアのビューの選択がうまくできないようです。

グーグル公式サイトにも本件に関する情報がありません。

しばらく情報待ちの状態です。

お礼

コメントありがとうございました！
返信が遅くなり、申し訳ありません。

私もいろいろ調べたのですが、情報がみつからず、
結局、うまくいっているサイトのソースを見て
下記で改善されました。

<div id="wrapper" style="overflow:visible;">

<div id="map"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key="></script>

<script type="text/javascript">
(function(){

var latlng = new google.maps.LatLng(<?php echo $xml->coordinate->lat; ?>,<?php echo $xml->coordinate->lng; ?>);
var myOptions = {
zoom: 15
, center: latlng
, mapTypeId: google.maps.MapTypeId.ROADMAP
, scrollwheel: false
};
var map_01 = new google.maps.Map(
document.getElementById("map")
, myOptions
);
var marker = new google.maps.Marker({
position: latlng,
map: map_01,
icon: new google.maps.MarkerImage('img/map.png',new google.maps.Size(58,61),new google.maps.Point(0,0),new google.maps.Point(19,60))
});

}());
</script>

<div id="svp_area"></div>

<script type="text/javascript">
(function(){
var point = new google.maps.LatLng(<?php echo $xml->coordinate->lat; ?>,<?php echo $xml->coordinate->lng; ?>);
var pano2;

var panoramaDisp = function(id, latlng){
return new google.maps.StreetViewPanorama(
document.getElementById(id),
{
position: latlng,
pov: {heading: 165,pitch: 0},
zoom: 1
}
);
}

var viewS = new google.maps.StreetViewService;
viewS.getPanorama(
{
location: point,
preference: google.maps.StreetViewPreference.NEAREST,
source: google.maps.StreetViewSource.OUTDOOR
},
function(data, status){
if(status=="OK") pano2 = panoramaDisp("svp_area", data.location.latLng);
}
);
})();
</script>

</div>

StreetViewSource.OUTDOORと入っているところが
ポイントでしょうか。

よろしかったら試してみてください。