Google Fusion Tables マップのカスタム情報ウィンドウ レイアウトを作成しています。私の列の 1 つは (部分的な) 画像名を指定し、これは背景画像として使用されます。この背景画像を情報ウィンドウの端と同じ高さにしたいと思います。以下に記述したコードは、ネイティブ html では機能しますが、情報ウィンドウでは機能しません。
- 背景画像は表示されません (デフォルトでは背景の単色になります)。
- 情報ウィンドウ内のコンテンツの周りのパディングを取り除くことができません
<div class='googft-info-window' style='font-family: sans-serif; width:495px; padding:0px; margin:0px;'> <div style="width:495px; height:36px; background:url(http://www.exampleurl.com/images/{header_hex}.gif) #{header_hex};"> <a href="{url}" style="font-weight:bold;font-size:14pt;color:#0066ff; text-decoration:none;" target="_blank" >{item}</a> </div> </div>
ありがたく受け取ったアイデア...ありがとう。
追加するために編集:
ビデオを情報ウィンドウに埋め込む際にも問題があります。ビデオは 1 つだけです。下の地図リンクの東にある黄色のマーカーにあります。(このマーカーの情報ウィンドウには、画像がまだアップロードされていないため、ビデオがあるはずの場所のすぐ上に壊れた画像が表示されています)。私が使用しているビデオ埋め込みコードは次のとおりです。
<iframe width="300" height="165" src="http://www.youtube.com/embed/-yYLLb53V8E?rel=0" frameborder="0" allowfullscreen></iframe>
Fusion Tables (実験的) を使用しており、情報ウィンドウのレイアウトは次のとおりです。
<div class='googft-info-window' style='font-family:sans-serif; color:#666; width:495px; padding:0px; margin:0px;'>
<div style="width:495px; background:url(http://www.responsibletravel.com/imagesclient/{header_hex}.gif) #{header_hex};"><div style="padding:8px;">
<a href="{url}" style="font-weight:bold;font-size:14pt;color:#0066ff; text-decoration:none;" target="_blank" >{item}</a>
</div></div>
<div style="float:left; width:330px; padding-top:10px;">
<div style="width:330px; padding-bottom:15px;">{description}</div>
<div style="width:330px; padding-bottom:15px;"><a href="{url}" style="color:#0066ff; text-decoration:none;" target="_blank" >Read more about this {type}</a></div>
<div style="width:330px;">{enquiry_url}</div>
<div style="width:330px;"><a href="{review_url}" target="_blank" >{stars}</a> <a href="{review_url}" style="color:#0066ff; text-decoration:none;" target="_blank" >{reviews}</a></div>
<div style="float:left; width:110px; padding-top:10px">
<span style="font-weight:bold; font-size:11px">Share this:</span><br>
<a href="http://www.facebook.com/sharer.php?u={url}&t={item}" style="color:#0066ff; text-decoration:none;" target="_blank"><img src="http://www.responsibletravel.com/imagesclient/facebook-button-26.gif" style="border:0; padding:5px 5px 5px 0px;"></a>
<a href="http://twitter.com/home?status={item}+{url}+%28via+%40r_travel%29" style="color:#0066ff; text-decoration:none;" target="_blank"><img src="http://www.responsibletravel.com/imagesclient/twitter-button-26.gif" style="border:0; padding:5px 5px 5px 0px;"></a>
</div>
<div style="float:left; width:100px; padding-top:26px">{xsell_icon_1}</div>
</div>
<div style="float:right; width:160px; padding-top:10px;">
<div style="float:right; padding-top:10px"><a href="{url}" target="_blank" ><img src='{image_S}' width='148' style='float:right; vertical-align:top; border:0'alt="{item}"/></a></div>
<div style="float:right; padding-top:5px">{video_embed}</div>
<div style="float:right; padding-top:10px"><a href="http://www.visitbrighton.com" target="_blank"><img src="http://www.responsibletravel.com/imagesclient/visit-brighton-logo-148x58.gif" style="border:0; width:148px;"></a></div>
</div>
</div>
地図はこちらです (一部の情報はまだ入力中ですが、おわかりいただけると思います):
ありがとうございました...