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で質問しましょう!
似たような質問が見つかりました
- Google Maps Googleマップに投稿された画像を自身のホームページやブログ等で使用してよいでしょうか? 1 2023/02/14 00:28
- Google Maps googleストリートビューで大きい黒枠のウインドウが邪魔 2 2023/02/15 21:47
- その他(IT・Webサービス) Yahooの地図の文字サイズ、googleの地図の画面分割 1 2022/05/21 12:31
- WordPress(ワードプレス) WordpressでYouTubeの埋め込みができない。 1 2022/10/26 01:08
- au(KDDI) 特定の画面を見るとスマホが固まります ご覧頂き有難うございます。 特定のページを見るとスマホが固まり 1 2023/08/21 19:29
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 6 2022/06/08 12:55
- Visual Basic(VBA) Excelのマクロコードについて教えてください。 1 2022/06/19 10:08
- 日本語 「~人」と「~名」の使い分け 2 2022/06/02 11:59
- ホームページ作成・プログラミング chromeでhttpdを使うと 2 2022/03/23 10:54
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAで、MsgBox やInput...
-
Outlookの予定表で色をつけるこ...
-
lenovo L512(WIN7) BIOS画面
-
「PC Helpsoft Driver Updated...
-
アドレス帳のアイウエオ順表示...
-
WUXGAで1920*1080表示ができる...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
Excelシート上のマクロを登録し...
-
CloseとDisposeの違い
-
メルカリのメルカードで買い物...
-
特定のキーを押すまでループさ...
-
VBAでループ内で使う変数名を可...
-
アクセスVBAのMe!と[ ]
-
筋トレ初心者です。 ジムでひた...
-
DoEventsがやはり分からない
-
Excel ラジオボタンのリセット...
-
Accessのフォームでタブの色
-
お家デートをしててハグを長い...
-
リョウ・・・量?料?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセルVBAで、MsgBox やInput...
-
「PC Helpsoft Driver Updated...
-
スマホF-51Bに緊急時情報画面で...
-
コマンドプロンプト(cmd)でのtr...
-
Outlookの予定表で色をつけるこ...
-
イベントビューアのWindowsログ...
-
プロジェクターで投影した場合...
-
【Access】%表示が桁あふれした...
-
ff13の視点が悪すぎてすぐに自...
-
NHKBSデジタル放送で表示される
-
アドレス帳のアイウエオ順表示...
-
Windows7 起動時のユーザ名表...
-
ツクールXPの顔グラ表示方法
-
lenovo L512(WIN7) BIOS画面
-
EXCEL 100%積み上げ横棒グラフ...
-
左側が途切れて表示される
-
Android12でポタンを下に表示し...
-
WUXGAで1920*1080表示ができる...
-
zenlyっていう、位置情報のアプ...
-
Delphi:タブページについて
おすすめ情報