ポップアップで Google 静的マップを読み込み、画像の画像 URL を動的に設定します。ソース コードは正しいアドレスを表示しますが、ページの読み込み時にページに表示されません。Image のソース コードにマウスを合わせると、ソース コード (Firefox では ei Firebug) に読み込まれ、ポップアップを再度開くと、Image が正常に読み込まれます。初めてロードされない理由を教えてください。
ステップ1 マイページを開く
ステップ 2 マップをクリックします。空白です
ステップ 3 この静的マップ イメージの HTMl コードを Firebug で表示すると、
ステップ 4 でマウスを画像ソース コードに移動します。画像は読み込まれますが、静的な画像ポップアップには何も表示されません。 クリックして画像を表示します。
ステップ 5 ポップアップを閉じます
ステップ 6 再度マップ ポップアップを開くと、イメージが正常にロードされます。
クリックして画像を表示
Firebug で画像の HTML ソース コードの上にマウスを移動しない限り、画像は読み込まれません。このケースで提案してください。
コードソースコード:
<tr>
<td width=""114"" height=""22"">
<asp:Localize runat=""server"" ID=""locPickUpLocation"" Text=""Pick-up Location:"" meta:resourcekey=""locPickUpLocationResource1""></asp:Localize>
</td>
<td width=""182"">
<b>
<asp:Literal ID=""ltPick"" runat=""server"" meta:resourcekey=""ltPickResource1""></asp:Literal> <span id=""divPickMapLink"" runat=""server"" class=""CarMapBut apf""><span><asp:Localize runat=""server"" ID=""picklocMap"" Text=""Map"" meta:resourcekey=""picklocMapResource1""></asp:Localize></span></span>
</b>
</td>
<td width=""116"" class=""padlt5"">
<asp:Localize runat=""server"" ID=""locDropOffLocation"" Text=""Drop-off Location:"" meta:resourcekey=""locDropOffLocationResource1""></asp:Localize>
</td>
<td width=""183"">
<b>
<asp:Literal ID=""ltDrop"" runat=""server"" meta:resourcekey=""ltDropResource1""></asp:Literal> <span id=""divDropMapLink"" runat=""server"" class=""CarMapBut apf""><span><asp:Localize runat=""server"" ID=""droplocMap"" Text=""Map"" meta:resourcekey=""droplocMapResource1""></asp:Localize></span></span>
</b>
</td>
</tr>
コードビハインド:
string pickAdd = ltPick.Text.Replace(""<br />"", """");
divPickMapLink.Attributes.Add(""onclick"", ""javascript:DisplayMapByAddress('"" + pickAdd + ""');"");
ltDrop.Text = carBooking_.GetDropoffLocationDescription("", "");
string dropAdd = ltDrop.Text.Replace(""<br />"", """");
divDropMapLink.Attributes.Add(""onclick"", ""javascript:DisplayMapByAddress('"" + dropAdd + ""');"");
HTML ページ
GoogleMapStatic.htm
<div id=""popup_box"">
<a id=""popupBoxClose"">Close</a>
<div id=""ViewMap"" class=""CarMap"">
<img id=""GoogleStaticImage"" src=""http://maps.googleapis.com/maps/api/staticmap?sensor=false&key=<%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %>&zoom=13&size=600x420¢er=New York&markers=color:green%7Clabel:A%7CNew York"" />
</div>
</div>
<div id=""greyBgBkgrnd""></div>
<script type=""text/javascript"" charset=""utf-8"">
$(document).ready(function () {
$(document).keypress(function (e) {
if (e.keyCode == 27) { unloadPopupBox(); }
});
$('#popupBoxClose').click(function () {
unloadPopupBox();
});
});
function unloadPopupBox() { // TO Unload the Popupbox
$('#popup_box').fadeOut(""slow"");
$(""#greyBgBkgrnd"").css({ // this is just for style
""opacity"": ""1""
});
$('#popup_box').hide();
CloseGreyBg();
}
function loadPopupBox() {
// To Load the Popupbox
$('#popup_box').fadeIn(""slow"");
$('#popup_box').css({
""left"": ""300px"",
""top"": ""150px"",
'zIndex': 400
});
$(""#greyBgBkgrnd"").css({ // this is just for style
""opacity"": ""0.3""
});
DisplayGreyBg();
}
function DisplayGreyBg() {
var bWidth = ($('body').width()) + 25;
if ($.browser.msie && $.browser.version == 7) {
var bWidth = $('body').width();
$('.filterreg:first').css('z-index', '300');
}
var bHeight = $('body').height();
$('#greyBgBkgrnd').css({ 'width': bWidth + 'px', 'height': bHeight + 'px', 'zIndex': 399, 'background': '#666666', 'opacity': '0.5', 'filter': 'alpha(opacity = 50)', 'position': 'absolute', 'top': '0', 'left': '0' });
$('#greyBgBkgrnd').fadeIn(""slow"");
$('body').css('overflow', 'hidden');
//IE6 Bug with SELECT element always showing up on top
if ($.browser.msie && $.browser.version < 7) {
$('select').each(function () {
$(this).hide();
});
}
}
function CloseGreyBg() {
$('#greyBgBkgrnd').css({ 'width': '0px', 'height': '0px', 'zIndex': -1 });
$('#greyBgBkgrnd').fadeOut(""slow"");
if ($.browser.msie && $.browser.version == 7) {
$('body').css('overflow-y', 'auto');
$('.filterreg:first').css('z-index', '99998');
} else {
$('body').css('overflow', 'auto');
}
//IE6 Bug with SELECT element always showing up on top
if ($.browser.msie && $.browser.version < 7) {
$('select').each(function () {
$(this).show();
});
}
}
///// Display map on Popup with long, lat
function DisplayMapByLatLong(lat_, long_) {
loadPopupBox();
// When map object is created it tries to figure out how big the canvas is and if popup is not fully loaded yet it may get wrong values.
// So 'loadPopupBox()' function is called before showMap and setTimeout is called to wait till popup is proper loaded
$('#popupBoxClose').show();
setTimeout("""", 100);
var imgsrc = ""http://maps.googleapis.com/maps/api/staticmap?sensor=false&key=<%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %>&zoom=13&size=600x420¢er="" + lat_ + "","" + long_ + ""&markers=color:green%7Clabel:A%7C"" + lat_ + "","" + long_;
$(""#GoogleStaticImage"").attr(""src"", imgsrc);
}
///// Display map on Popup with address
function DisplayMapByAddress(address) {
loadPopupBox();
// When map object is created it tries to figure out how big the canvas is and if popup is not fully loaded yet it may get wrong values.
// So 'loadPopupBox()' function is called before showMap and setTimeout is called to wait till popup is proper loaded
$('#popupBoxClose').show();
setTimeout("""", 100);
var imgsrc = ""http://maps.googleapis.com/maps/api/staticmap?sensor=false&key=<%= DTIsland.DTCarIslandSettings.CarGoogleMapKey %>&zoom=13&size=600x420¢er="" + address + ""&markers=color:green%7Clabel:A%7C"" + address;
$(""#GoogleStaticImage"").attr(""src"", imgsrc);
}
</script>
Problem is with API key for static map. I am using invalid API key.