GoogleMapAPI V3 にて、ストリートビューが表示されない場

質問

GoogleMapAPI V3 にて、ストリートビューが表示されない場合があります。

こちらの、

http://okwave.jp/qa/q6250162.html

マップの表示がずれてしまう現象は親切な回答者様によって解決出来たのですが、
同時に同じ画面にストリートビューも表示させようとしたところ、
やはり、ストリートビューでも同現象が発生してしまうようです。

イベントリスナで、visible_changed や initialized などを使ってみたのですが、
やはりうまくいきませんでした。。

map と streetview のイベントを両方取得してからマップ表示部分を隠すようにするには、
どのような方法がスマートでしょうか。

どなたかご教授頂けると助かります。

回答No.4

fujillin · ベストアンサー

No2、No3です。

＞Google Map の既知の問題で、display: none; のままで出力すると、
＞マップがズレるという現象が発生しているので
はい。

それなので、display:noneを使用せず、かつ、mapやビューのload完了を感知しなくてもよい方法のアイデアとして、他の表示による方法や重なった下に表示する方法などを（それでう、まく行くのかはわかりませんが）提示してみた次第ですが・・・？　（どうも、意味が通じていないような気がします）

お礼

アドバイス頂いたとおり、
自前でタブ切り替えJSを作成し、以下のようにすることで、解決しました！
（visibleだといけました！）

//div_aを非表示
document.getElementById('div_a').position = 'absolute';
document.getElementById('div_a').style.top = '-1000px';
document.getElementById('div_a').style.left = '-1000px';
document.getElementById('div_a').visibility = 'hidden';
//div_bを表示
document.getElementById('div_b').style.visibility = 'visible';
document.getElementById('div_b').style.position = '';
document.getElementById('div_b').style.top = '';
document.getElementById('div_b').style.left = '';

※jQuery を外すと、他の色々なコンテンツに影響が出てしまい、
　それを修正するのに手間取っていたためお礼が遅れてしまいました。
　ありがとうございました。

回答No.3

fujillin

No2です。

googlemapもプラグインもわかってないので、またまた机上の空論ですが・・・

＞Map呼び出し前にJSにて強制表示
＞display:block
＞　↓
＞Mapのtilesloadedイベント完了後に
＞display:none
の処理が、補足でご提示の処理と同一ということでしょうか？

それで、
＞ストリートビューがグレー表示になってしまう
というのであれば、
＞display = 'block'; のままにしておくと問題無く表示されます
とあわせて考えると、タブのプラグインが何らかの悪さをしていると考えるしかないのでは？

もしも、No2のようなアイデア（display:none　以外の方法で見えなくしておく）でマップの表示が可能であるならば、そのプラグインをあきらめるという手もあるのではないでしょうか？

例えば、わざわざ表示を隠さなくても、表示部分を重ねておいて、要素の順を制御する方法やz-indexを制御することでタブ表示をするようなロジックにしてしまえば、個々の要素を非表示にする必要がまったくなくなるので画面外へおくなどの手間もいらなくなると考えられます。（重なった下で表示しておいても、うまくマップが表示できるかの確認は必要ですが・・・）

タブ用のプラグインがどのようなものなのかわかりませんが、scriptによる処理が、リスト形式のタブのクリックに応じて対応するdivなどの表示部分を制御するだけのものなら自作してもたいした手間ではないでしょう。基本的にソースやCSS等はそのまま利用できると想像されますし・・・
いろいろ効果がついているものを再現するのだと、少々面倒かも知れませんけれど・・・（角丸とか）
まぁ、複雑であっても効果の大部分をCSSで実現していてくれれば、関係ないとも言えますけど　（笑）

でも、jqueryを利用なさっているということなので、それなりに簡単になるとは思いますけれど・・・？

お礼

ご回答ありがとうございます！
以下、インラインにて、、、

＞Map呼び出し前にJSにて強制表示
＞display:block
＞　↓
＞Mapのtilesloadedイベント完了後に
＞display:none
の処理が、補足でご提示の処理と同一ということでしょうか？

⇒補足の方は、tilesloaded 完了後ではなく、
ストリートビューにて、近隣の座標を取得する
client.getPanoramaByLocation イベント完了後に、
display:none としています。

---------------------------------------
それで、
＞ストリートビューがグレー表示になってしまう
というのであれば、
＞display = 'block'; のままにしておくと問題無く表示されます
とあわせて考えると、タブのプラグインが何らかの悪さをしていると考えるしかないのでは？

⇒Google Map の既知の問題で、display: none; のままで出力すると、マップがズレるという現象が
　発生しているので、ストリートビューも同様では？と考えています。

　参考ＵＲＬです：
　http://d.hatena.ne.jp/nitoyon/20050917/p2

　が、確かにタブのプラグインが悪さをしている可能性はゼロではありませんね。。

---------------------------------------

ひとまず、もう少し頑張ってみます！

回答No.2

fujillin

よくわかっていませんが、アイデアのみ。
前回の質問と同様に非表示が原因で、表示が終わったところで、非表示にしたいけれどタイミングがとれないという意味と解釈しました。

表示が終わったら非表示にするという方法ではなく、（未検証ですが）見えないところに表示しておくというのではだめでしょうか？

例えば、
1）position:absolute　で表示位置を上や左側にシフトして画面から追い出しておく。

2）display:noneの代わりに、visibility:hiddenや opasity:0を設定する
　（この場合、レイアウトに組込まれてしまうので、display:noneと同じ効果に
　　するために position:absoluteを併用）

などの方法でも、同じような不具合が生じるでしょうか？（未検証です）

お礼

ご教授ありがとうございます。

現状、タブ操作の jQuery プラグインが使用されているため、
対象の画面は、強制的に display:none とされてしまう状態です。
（つまり、position:absolute や visibility:hidden が使えない状態です。
説明不足で申し訳ないです。。）

なので、今現在のMAPの表示は以下のようにしています。

--------------------
初動
display:none
↓
Map呼び出し前にJSにて強制表示
display:block
↓
Mapのtilesloadedイベント完了後に
display:none
--------------------

ストリートビューでも、tilesloaded のようなイベントがあると良いのですが、、
（そもそも、そんな jQueryを使うなというハナシもありますが、、）

補足

ちなみに以下でやってもダメでした、、、
（ストリートビューがグレー表示になってしまう）
もちろん、display = 'block'; のままにしておくと問題無く表示されます。

latlng = new google.maps.LatLng(35.689729, 139.700464);

//マップ出力前に地図のタブを強制表示させる
var gdiv = document.getElementById('g_map');
gdiv.style.display = 'block';

//マップオプションを設定する
var mapOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

//マップを出力する
var mapdiv = document.getElementById('map_canvas');
map = new google.maps.Map(mapdiv, mapOptions);

//ストリートビューの設定を開始する
var panoramaOptions = {
position: latlng,
pov: {
heading: 34,
pitch: 1,
zoom: 1
}
};

var nearestLatLng = null;
var nearestPano = null;
var client = new google.maps.StreetViewService();
//検索する半径
var radius = 100;

client.getPanoramaByLocation(latlng, radius, function(result, status) {
if (status == google.maps.StreetViewStatus.OK) {
var location = result.location;
nearestLatLng = location.latLng;
myPano.setPosition(nearestLatLng);
}

//地図のタブを非表示にする
gdiv.style.display = 'none';
});

回答No.1

yyr446

GoogleMapAPI V3じゃなくて、GoogleMapAPI V2を使えば
うまくいくと思うんですが、V3使用にこだわるんですよね。
回答になってないか．．すまんです。

お礼

そうなのです、V2を使えばうまくいくのですが、
困った事にオーダーがV3なのです、、

補足

ちなみになのですが、どなたか
V2でうまくやる方法をご存じでしたらご教授頂けないでしょうか…？