GoogleMaps活用するぞ！（13） - インフォウィンドウを開こう (天懲四月-読書ノート)

今回から、インフォウインドウについて見ていくことにします。

インフォウインドウ（タブなし）を開く基本スクリプト

まず最初に、最もシンプルなタブなしのインフォウィンドウの開き方について見ます。

Google Mapsには、openInfoWindowとopenInfoWindowHtmlの二種類のメソッドが用意されています。

openInfoWindowは、DOM（Document Object Model）ノード形式でウィンドウ内の情報を記入するためのメソッドです。

一方、openInfoWindowHtmlは、html形式でウィンドウ内の情報を記入するためのメソッドです。

これまでの例と同じく、最初に定義する地図を描くための変数を"map"とすると、それぞれを用いてウィンドウを表示するスクリプトは、以下のとおりです。

var 変数 = new GLatLng( 緯度 , 経度 );
map.openInfoWindow(変数, DOMノード[, オプション値]) ;

var 変数 = new GLatLng( 緯度 , 経度 );
map.openInfoWindowHtml(変数, html文[, オプション値]) ;

上における「変数」は、ウィンドウごとに指定する緯度経度です。一番右の「オプション」はなくてもウィンドウが出せるのですが、ウィンドウの横幅を指定する際には必要となります。真ん中のウィンドウ内の情報を記述する部分ですが、残念ながら今の私はDOMノードについて十分な知識がありません。だから、DOMノードをあえて使うことによるメリットがどのあたりにあるのかも、正直言って分かりません。それゆえ、以降ではDOMノードを使うopenInfoWindowの内容については取り上げないことにします。どなたかもしDOMノードをHtmlに代えて使うことによるメリットをご存知の方がおられれば、ご教唆いただけば幸いです。とにかく、今の時点では、もっぱらｈｔｍｌを用いるopenInfoWindowHtml（それと、次回以降に出すタブつきのopenInfoWindowTabsHtmlメソッド）について検討することにします。

それぞれを用いてウィンドウを描いた例を、下に示します。

openInfoWindowを用いた例

Google Mapsの具体例：その３

openInfoWindowHtmlを用いた例

Google Mapsの具体例：その４

インフォウインドウのhtml文の書き方

上のopenInfoWindowHtmlを用いた例のスクリプトは、具体的に下のように書いています。赤の部分がhtml文です。このように、画像を埋め込んだり改行を行なったりするのは、全く一般のｈｔｍｌ文と同じように書くことができます。ただし、

必ず前と後ろをアポストロフィ（'）で閉じてください。

したがって、html文の中にアポストロフィを使うとエラーになってしまいます。そのため、html文中でアポストロフィを使うためには、数値実体参照で代用してください。数値実体参照とは、文字コード内の区点を指定することによってブラウザ上で文字を表示する方法のことです。アポストロフィの句点は16進法で"27"、10進法で"39"です。したがって、&#xと;の間に27を入れるか、あるいは、&#と;の間に39を入れる形によって、アポストロフィを表現してください。

var point001 = new GLatLng(34.8525868169593, 135.70471286773682);
map.openInfoWindowHtml(point001,
'<img src="mitsu.png"><p><font size="1">六月十日、光秀は少人数を率いて洞ヶ峠に向う。<br>大和の筒井順慶の動向を探るためだったが、順慶がもはや従わないと判断して、十一日下鳥羽に戻る。<br>以降天王山・男山の線を放棄して、兵力集中決戦を行なうしか選択肢がなくなる。</font>');

インフォウインドウの横幅を指定する

上の例は、文を改行しないと横幅が広くなってしまって、大変見づらい。そこで、横幅を指定するためにopenInfoWindowHtmlのオプションに値を投入します。

過程は抜きにして、以下のようにスクリプトを書けば横幅を指定できます。

var 変数w = map.getInfoWindow();
変数w.maxWidth = 横幅のピクセル数;

var 変数a = new GLatLng( 緯度 , 経度 );
map.openInfoWindowHtml(変数a, html文, 変数w) ;

たとえば、上の例で横幅を100ピクセルに指定するためには、このように書きます。横幅ピクセル数のための変数を"wdth01"とすれば、

var wdth01 = map.getInfoWindow();
wdth01.maxWidth = 100;

というわけで、前回のスクリプトに、横幅を100ピクセルに指定したウィンドウを一つ付け加えて、全体を書き換えてみます。

赤字の部分が、今回追加した部分です。これまでの例と同じく、マーカーを記入する行の一部は省略してあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml">

<head>

function load() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});

map.setCenter(new GLatLng(34.903671401859576, 135.6913661956787), 14);

var icon1 = new GIcon();
icon1.image = "mitsu.png";
icon1.iconSize = new GSize(20, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);

var icon2 = new GIcon();
icon2.image = "hide.png";
icon2.iconSize = new GSize(20, 20);
icon2.iconAnchor = new GPoint(6, 20);
icon2.infoWindowAnchor = new GPoint(5, 1);

var point101 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker101 = new GMarker(point101, icon1);
map.addOverlay(marker101);

var point102 = new GLatLng(34.908633821168436, 135.6767749786377);
var marker102 = new GMarker(point102, icon1);
map.addOverlay(marker102);

≪ここは省略されています≫

var point201 = new GLatLng(34.89346406486655, 135.68012237548828);
var marker201 = new GMarker(point201, icon2);
map.addOverlay(marker201);

var point202 = new GLatLng(34.90155964310935, 135.6764316558838);
var marker202 = new GMarker(point202, icon2);
map.addOverlay(marker202);

≪ここは省略されています≫

var polpoint001=new GLatLng(34.867834540841116, 135.65540313720703);
var polpoint002=new GLatLng(34.89163364963405, 135.68042278289795);
var polpoint003=new GLatLng(34.92612307758587, 135.69806098937988);
var polpoint004=new GLatLng(34.9643260674448, 135.72046279907226);
var polpoint005=new GLatLng(34.97923658319042, 135.74621200561523);
var line001 = [polpoint001,polpoint002,polpoint003,polpoint004,polpoint005];
map.addOverlay(new GPolyline(line001, "#00a800","3","0.9"));

var polpoint011=new GLatLng(34.97923658319042, 135.74621200561523);
var polpoint012=new GLatLng(34.9323859290129, 135.7448387145996);
var polpoint013=new GLatLng(34.90740204293937, 135.71874618530273);
var polpoint014=new GLatLng(34.89416805986599, 135.7009792327881);
var line002 = [polpoint011,polpoint012,polpoint013,polpoint014];
map.addOverlay(new GPolyline(line002, "#ff0000","3","0.9"));

var wdth01 = map.getInfoWindow();
wdth01.maxWidth = 100;

}
}

</script>
</head>

<table><tr><td width="510">
<div align="center"><font size="4" color="white"<b><GoogleMapで見る山崎大合戦></b></font></div>
<div align="center">- 天正十年(1582)六月十三日夕刻の布陣 -lt;/div><br>
<img src="mitsu.png">明智光秀方（総兵力15,000）　　　<img src="hide.png">羽柴秀吉方（総兵力35,000）<br>
<font color="#00a800">緑色は西国街道</font>、<font color="#ff0000">赤色は鳥羽街道</font>を示す。
<table cellspacing="2" bgcolor="black"><tr><td>
<div id="map" style="width: 500px; height: 450px"></div>
</td></tr></table>
<div id="message"></div>

</body>
</html>

下をクリックすれば、上の例を具体的に表示したページが表れます。（もちろん、Googleから取得したAPI Keyをページ内に埋め込んであります。）

Google Mapsの具体例：その５

次回は、タブつきのウィンドウを表示してみます。

天懲四月-読書ノート

mailto:suzumoto3@hotmail.co.jp

GoogleMaps活用するぞ！（13） - インフォウィンドウを開こう

（カテゴリ：GoogleMaps）

カテゴリー

アーカイブ

半徑半里圖會

検索