googleMapについて

質問

現在フォトビューワーを作っております。

フリッカーからジオタグ付きの画像を取得し、最新から15枚をサムネイル表示。
サムネイルをクリックすると拡大画像が表示され、拡大画像をクリックすると、
ジオタグのグーグルマップが表示されるというものです。

問題は、拡大画像をクリックした際、マップの一部分が灰色になり、まともに表示されない場合があるのです。

ページを開く→サムネイルクリック→拡大画像クリック→残念マップ。

残念マップ→サムネイルクリック→拡大画像クリック→正常マップ。

一度マップを表示してから、サムネイルクリック→拡大画像クリック→の流れだと、マップは正常に表示されます。

サムネイルクリック→拡大画像クリック→サムネイルクリックの場合、次に表示されるマップは残念マップです。

調べていく中で.css({display:"none"});があると発生するという事も知り、色々と試したのですが、どうにも上手くいきません。

説明下手で申し訳ないのですが、どなたかご教示いただけないでしょうか。

よろしくお願いいたします。

// JavaScript Document

var photoArray = new Array();

$(function(){
//alert("test");
var searchURL = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=247631e9618453041df148893302e211&tags=sky&page=0&per_page=15&has_geo=true&extras=geo&format=json";

$.ajax({
url : searchURL,
dataType : "jsonp",
jsonp : "jsonFlickrApi"
});
});

function jsonFlickrApi(data){
console.log(data);

//alert("jsonFLickrApi:"+data.photos.photo);
$(data.photos.photo).each(function(i) {
//console.log(this.latitude,this.longitude);

var geo = {lat:this.latitude, lng:this.longitude};

var imgTitle = {title:this.title};

//console.log(imgTitle.title);

var file = "http://farm" + this.farm + ".static.flickr.com/" + this.server + "/" + this.id + "_" + this.secret + "_" + "z" +".jpg"
//console.log(file);
var thumbnail = "<img src='"+file+"' width='60' height='50' data-lat='"+geo.lat+"' data-lng='"+geo.lng+"' data-title='"+imgTitle.title+"' style='margin:-6px 6px 37px 14px;'>";
//console.log(thumbnail);
$("#photoArray").css("height", Math.floor(photoArray.length)/5*110);
var h = $("#photoArray").attr("height");

$("#photoArray p").append('<img src="images/photoBg.png" width="70" height="75" style="margin:-12px 0 18px 10px;" top: -' + h + 'px;">').fadeIn("slow");

$("#photoArray").append(''+thumbnail+'').fadeIn("slow");
});

//マウスオーバー時のサムネイルopacity
$("#photoArray img").hover(function(){
$(this).stop(true).fadeTo("fast", 0.5);},function(){
$(this).fadeTo("fast",1);
});

//サムネイルをクリックすると実行される処理
$("#photoArray img").live("click",function(){
//console.log($(this).data('lat'), $(this).data('lng'), $(this).data('title'));
var img = $(this).attr("src");
var title = $(this).data('title');
//画像の座標を変数に入れる
var latLng = new google.maps.LatLng($(this).data('lat'), $(this).data('lng'));
var myOptions = {zoom: 14,center: latLng,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("googleMap"),myOptions);
var marker = new google.maps.Marker({position: latLng, map: map});

//console.log(latLng);

$("#bigPhoto").fadeOut("slow",function(){
$("#bigPhoto").html("<img src='"+img+"' width='368' height='290'>" + '<p>' + title + '</p>').fadeIn("slow");
});
//console.log(title);
$("#googleMap").fadeOut("slow").css({display:"none"});

});

$("#bigPhoto img").live("click",function(){
$("#bigPhoto").fadeOut("slow", function(){
$("#googleMap").fadeIn("slow");
});

});

}

回答No.1

fujillin · ベストアンサー

だいぶ前にテストしてみた記憶なので、少々あやふやですが…

display:noneの要素に対してmapのセッティングをしてロードするとうまく表示できないみたいです。

画面上で見せたくない場合は、
　1）visibility:hiddenを利用して非表示にする
　2）ネガティブマージンなどを利用して要素を一時的に画面外に置く
　3）z-index指定他で他の要素の下において見えない状態にする
などの方法で見えない状態になっている場合は、mapが表示できたように記憶しています。
（やや曖昧な記憶なので、ご自身で再度ご確認ください）

どのような文書構造とレイアウトなのかはわかりませんが、状況に応じてdisplay:none以外の方法を使用すれば安定して表示可能にできるものと思います。
一方で、ライブラリ（jQueryか？）をご利用なさっているようですが、fadeOut()などの結果display:noneに設定されてしまう可能性がありますのでご注意を。（←こちらも未確認ですが…）

お礼

ありがとうございます！

display:noneをvisibility:hiddenに変更し、最後の$("#googleMap").fadeIn("slow")に.css({visibility:""});を追加したらいけました！

おっしゃる通り、jQueryを使用しています。
display:noneだけでなくfadeOut()も外すことで機能するようになりました。

本当にありがとうございました！