![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67b6d)
GoogleMapAPI V3 にて、ストリートビューが表示されない場合があります。
こちらの、
http://oshiete.goo.ne.jp/qa/6250162.html
マップの表示がずれてしまう現象は親切な回答者様によって解決出来たのですが、
同時に同じ画面にストリートビューも表示させようとしたところ、
やはり、ストリートビューでも同現象が発生してしまうようです。
イベントリスナで、visible_changed や initialized などを使ってみたのですが、
やはりうまくいきませんでした。。
map と streetview のイベントを両方取得してからマップ表示部分を隠すようにするには、
どのような方法がスマートでしょうか。
どなたかご教授頂けると助かります。
No.4ベストアンサー
- 回答日時:
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
- 回答日時:
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; のままで出力すると、マップがズレるという現象が
発生しているので、ストリートビューも同様では?と考えています。
参考URLです:
http://d.hatena.ne.jp/nitoyon/20050917/p2
が、確かにタブのプラグインが悪さをしている可能性はゼロではありませんね。。
---------------------------------------
ひとまず、もう少し頑張ってみます!
No.2
- 回答日時:
よくわかっていませんが、アイデアのみ。
前回の質問と同様に非表示が原因で、表示が終わったところで、非表示にしたいけれどタイミングがとれないという意味と解釈しました。
表示が終わったら非表示にするという方法ではなく、(未検証ですが)見えないところに表示しておくというのではだめでしょうか?
例えば、
1)position:absolute で表示位置を上や左側にシフトして画面から追い出しておく。
2)display:noneの代わりに、visibility:hiddenや opasity:0を設定する
(この場合、レイアウトに組込まれてしまうので、display:noneと同じ効果に
するために position:absoluteを併用)
などの方法でも、同じような不具合が生じるでしょうか?(未検証です)
この回答への補足
ちなみに以下でやってもダメでした、、、
(ストリートビューがグレー表示になってしまう)
もちろん、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';
});
ご教授ありがとうございます。
現状、タブ操作の jQuery プラグインが使用されているため、
対象の画面は、強制的に display:none とされてしまう状態です。
(つまり、position:absolute や visibility:hidden が使えない状態です。
説明不足で申し訳ないです。。)
なので、今現在のMAPの表示は以下のようにしています。
--------------------
初動
display:none
↓
Map呼び出し前にJSにて強制表示
display:block
↓
Mapのtilesloadedイベント完了後に
display:none
--------------------
ストリートビューでも、tilesloaded のようなイベントがあると良いのですが、、
(そもそも、そんな jQueryを使うなというハナシもありますが、、)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAで、MsgBox やInput...
-
「PC Helpsoft Driver Updated...
-
Delphi:タブページについて
-
スマホF-51Bに緊急時情報画面で...
-
Excel sheet表示について
-
EXCEL VBA マクロ 実行する度に...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
Excelシート上のマクロを登録し...
-
VBAでループ内で使う変数名を可...
-
CloseとDisposeの違い
-
メルカリのメルカードで買い物...
-
DoEventsがやはり分からない
-
データがあれば○○なければのSQL
-
VBA エンターキーでイベントに...
-
【VB】タブ切り替え時のイベント
-
findは動くがfindnextがマクロ...
-
vb.net 画像の透過について
-
Googleフォーム・複数人の申し...
-
月度は何て読みますか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセルVBAで、MsgBox やInput...
-
「PC Helpsoft Driver Updated...
-
イベントビューアのWindowsログ...
-
コマンドプロンプト(cmd)でのtr...
-
プロジェクターで投影した場合...
-
スマホF-51Bに緊急時情報画面で...
-
複数の画面を同時に表示したい
-
Outlookの予定表で色をつけるこ...
-
ff13の視点が悪すぎてすぐに自...
-
Windows7 起動時のユーザ名表...
-
オンボードVGAを無効にする方法
-
NHKBSデジタル放送で表示される
-
lenovo L512(WIN7) BIOS画面
-
エクセル マクロ教えて下さい。
-
ツクールXPの顔グラ表示方法
-
タイマーをつけたモードレスダ...
-
【Access】%表示が桁あふれした...
-
富士通のノートPC画面で、何...
-
希望するページを簡単に開くには?
-
タスクマネージャーの表示が変...
おすすめ情報