今回は、『GOOGLE MAPS HACKS』（Rich Gibson,Schuyler Erle著、オライリージャパン）の第６章に紹介されていたテクニックを使って、インフォウィンドウの中に地図画面を埋め込むテクニックに挑戦します。Google Mapが用意するshowMapBlowupメソッドではテキストや他の画像をウィンドウ内に埋め込むことができませんが、このテクニックを使えば可能となります。だから、より一層使い勝手がよいと思います。ただし、htmlの知識に加えて、スタイルシートの知識が多少必要となります。
スクリプト
元本を参照にして、以下のようなスクリプトを書いてみました。スクリプト部分を全て抜き出しています。
|
<script type="text/javascript">
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(34.396853434207465, 132.45503425598144), 16);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
//カスタマイズアイコンの変数"icon1"を定義
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="width: 300px; height: 350px; text-align: center; font-family: serif;"><font color="red">広島市民球場</font><div id="smallmap" style="width:300px; height: 300px;"</div></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);
}
}
</script>
|
|
以前に検討したopenInfoWindowHtmlを使ってマーカークリックでインフォウィンドウを出す場合と、基本的な構造は変わりません。
ただし、function()の中身が重要です。青字の部分が今回のhtml文の内容になります。この中には、スタイルシートが使われています。すなわち、<div>～</div>の中にはさみこんだタグの中で、指定したスタイルを活用するように書かれているのです。上の例では、２重に<div>～</div>を使っています。外側の、<div>～</div>では、ウィンドウのｈｔｍｌ全体のスタイルとして「横幅300ピクセル、縦幅350ピクセル、中央揃え、セリフつきフォント」を指定してみました（ただし、こちらのスタイルは、指定しなくてもインフォウィンドウを出すことができます）。そして内側の、<div>～</div>では、下の緑色の３行で"smallmap"というidで定義されたインフォウィンドウ内に出るGoogle Mapの内容を、スタイルとして読み出す内容となっています。上の例では、インフォウィンドウ内のGoogle Mapは、ズーム16段階の地図にコントロールとしてGSmallMapControlを付けるように指定しています。上の例では加えて、"G_SATELLITE_MAP"というオプションを指定して、開いたときにサテライトマップが出るように指定してあります。
たとえば、インフォウィンドウ内のGoogle Mapを「17段階、（通常の）マップ」で開く場合には、このように書きます。
|
var smallmap = new GMap2(document.getElementById("smallmap"));
smallmap.setCenter(point101,17,G_NORMAL_MAP);
smallmap.addControl(new GSmallMapControl());
|
|
上のスクリプトの具体例を、下に示します。地図中央のマーカーをクリックすると、サテライト写真入りのインフォウィンドウが出てきます。
次回は、インフォウィンドウ以外の方法でマーカー近辺に情報を出す方法について、挑戦します。