みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascriptで困ってます。

モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。
いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。
<div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div>
のあたりも無理な記述になっています。
colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか?よろしくお願いします。


<html>
<head>
<link rel="stylesheet" type="text/css" href="css/colorbox.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/jquery.colorbox.js"></script>

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

var latlng = new google.maps.LatLng(34.0,135.0);

var opts = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), opts);

var m_latlng = new google.maps.LatLng(34.0,135.0);
var marker = new google.maps.Marker({
position: m_latlng,
map: map
});

}



$(function(){

$('.inline').colorbox({
inline:true,
width:"80%",
height:"80%",
});

});

</script>
</head>


<body>
<a href="#inline_content" class="inline" title="" >googlmap</a>

<div style='display:none'>
<div id='inline_content'>
<div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div>
</div>
</div>

</body>
</html>

投稿日時 - 2015-01-21 23:38:54

QNo.8899646

すぐに回答ほしいです

質問者が選んだベストアンサー

こんにちは。

>colorboxで非表示になっていたdivが表示になったときに地図をきちんと
>読み込まれるようにするにはどのようにすればよいのでしょうか?
なんか誤解がありそうに感じますが・・・

ご提示のHTMLの<div id='inline_content'>の要素をcolorboxで直接に表示/非表示の制御ってできましたっけ?(見た目で同様のものが見えるとかではなく、その要素の表示/非表示)
記憶なので正確ではありませんが、colorboxは表示用のbox(div要素等)を別に設定していて、そちらの内容を書き換えたり、サイズを変更したりしていたと思いますが?


直接の回答にはならないかもしれませんが、個々の部分に対して・・・

>非表示にしていたdivにgooglemapを読み込んでいるので~
それはその通りなのですが、読み込ませるには非表示にする方法を変えれば可能です。
display:noneを用いずに、
・visibility:hiddenで非表示にする
・リバースマージン等で画面外に表示(見えないので非表示状態)
・他の要素の下に入れて隠す(これも見えない)
・透明度を0にして見えなくする
などの方法をとれば、見えない状態でもgoogle mapを読み込むことが可能だったと記憶しています。

>~~のあたりも無理な記述になっています。
jQueryを用いているようですので、bodyの中に無理に入れなくても、document readyで実行させればよろしいかと思います。
通常よく用いられている方法ですね。
 $(function(){ initialize(); });


colorboxの枠内にmapを表示させるのは少し面倒かも知れません。
一番簡単そうなのは、colorboxの枠を先に表示させてからcolorboxの表示用要素に直接google mapを表示させるという方法でしょうか?
colorbox側にイベント用のフックが用意されているようですので、loadやcompleteのタイミングでmapを表示させるという方法になるかと思います。
ただし、これだと実際に表示されるまでに少しだけ時間がかかる可能性がありますが、表示内容をajaxで読み込む場合と似たようなものと言えるのでは・・・。

全体像がよくわからないので何をなさりたいのかちゃんと把握できてませんが、『リンクをクリックしたらmapがフェードインする』というようなものでしたら、フェードの部分だけ自作してあげればmapを先行して読み込んでおくことも可能と思います。
でも、jQueryのfadeIn/Outをそのまま利用したりすると、非表示時にdisplay:noneになりますので注意が必要かもしれません。

投稿日時 - 2015-01-22 11:08:26

お礼

ありがとうございました。colorbox自体を理解できてませんでした。教えていただいたようにcolorbox側に用意されているcompleteでうまくいきました。

投稿日時 - 2015-01-25 19:19:55

このQ&Aは役に立ちましたか?

12人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問