前回で検討した、インフォウィンドウの中にGoogle Mapを表示する方法の中には、スタイルシートを使ってインフォウィンドウを整形するテクニックが含まれています。今回はこれをもう少し突っ込んで取り上げます。このテクニックを使えば、インフォウィンドウのオプション値を指定することなしに横幅が指定できるだけでなく、インフォウィンドウのオプション値で指定できない縦幅も指定することができます。
例その1：ｔｍｌ文に<table>タグを使う方法
openInfoWindowHtmlおよびopenInfoWindowTabsHtmlの中身は、html文で書き表します。だから、Html文の書式を用いれば、さまざまな表現をすることができます。
たとえば以下の例は、html文を入れ込んだ変数"text"（赤字の部分）の中身に、<table>～</table>タグを使って、縦横の幅と背景をして指定ます。
変数の内容が長大な場合には、分けて書くことができます。下の変数"text"の例を参照にしてください。ただし、前にも触れましたがhtml文の中身にアポストロフィ（'）は直接使えません。数値実体参照を使ってください。
|
//アイコンを定義
var icon1 = new GIcon();
icon1.image = "gmred.png";
icon1.shadow = "gmshadow.png";
icon1.iconSize = new GSize(12, 20);
icon1.shadowSize = new GSize(22, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);
//インフォウィンドウの内容を定義
var point101 = new GLatLng(34.396853434207465, 132.45503425598144);
var marker101 = new GMarker(point101, icon1);
GEvent.addListener(marker101, "click", function() {
var text='<table background="redline.png"><tr><td width="170" height="200" valign="top">'
text +='<a href="http://www.city.hiroshima.jp/shimin/bunka/kyujou/" target=_blank">広島市民球場</a><p>';
text +='<div id="smallmap" style="width:150px; height: 150px;"></div><br>'
text +='<font size="0.6em">西日で試合が中断する球場。上空から見たボールパークの形は、かくも美しい。ドームなんかよりも...</font></td></tr></table>';
marker101.openInfoWindowHtml(text);
var smallmap = new GMap2(document.getElementById("smallmap"));
smallmap.setCenter(point101,16,G_SATELLITE_MAP);
smallmap.addControl(new GSmallMapControl());
});
map.addOverlay(marker101);
|
|
上のスクリプトの具体例を、下に示します。地図中央のマーカーをクリックすると、サテライト写真入りのインフォウィンドウが出てきます。
例その２：ｔｍｌ文にスタイルシートを使う方法
スタイルシートを使えば、ｈｔｍｌ文により複雑な指定ができます。たとえば<div>～</div>タグを使えば、はさみ込んだ文の内容を指定することができます。以下の例は、html文を入れ込んだ変数"text"（赤字の部分）の中身に<div style="....">～</div>タグを使って、はさみ込んだ文の内容を指定しました。<div>～</div>タグが３回使われていますが、前と後は文の内容であり、中間はさらに下の行で"smallmap"というidにより指定されたインフォウィンドウ内のGoogle Mapです。したがって、中間はGoogle Map固有の書式です。
|
//アイコンを定義
var icon1 = new GIcon();
icon1.image = "gmred.png";
icon1.shadow = "gmshadow.png";
icon1.iconSize = new GSize(12, 20);
icon1.shadowSize = new GSize(22, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);
//インフォウィンドウの内容を定義
var point101 = new GLatLng(34.396853434207465, 132.45503425598144);
var marker101 = new GMarker(point101, icon1);
GEvent.addListener(marker101, "click", function() {
var text='<div style="color: red; font-size :10pt;">'
text +='<a href="http://www.city.hiroshima.jp/shimin/bunka/kyujou/" target=_blank">広島市民球場</a></div><p>';
text +='<div id="smallmap" style="width:150px; height: 150px;"></div><p>'
text +='<div style="color: brown; line-height:1; letter-spacing;3px; font-face: ＭＳ Ｐゴシック; font-size: 12pt;">'
text +=' ∧∧ ／￣￣￣￣￣￣￣￣￣<br> （,,ﾟДﾟ）＜ カープの色は赤よりブラウンじゃけえ。<br>'
text +=' ＼＿＿＿＿＿＿＿＿＿＿</div>';
marker101.openInfoWindowHtml(text);
var smallmap = new GMap2(document.getElementById("smallmap"));
smallmap.setCenter(point101,16,G_SATELLITE_MAP);
smallmap.addControl(new GSmallMapControl());
});
map.addOverlay(marker101);;
|
|
上のスクリプトの具体例を、下に示します。地図中央のマーカーをクリックすると、サテライト写真入りのインフォウィンドウが出てきます。
スタイルシートを使って、無理矢理にAAを表現してみました。まあこういうこともできるという、一例として。