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");
});
});
}
お礼
なるほど！参考になりました。 javascriptっていろいろできますね。 googlemapもapi随時更新している事を知りました。 GControl関連の方は、ちょっとややこしそうですね。 調べてみます。 ありがとうございます。