マーカーにマウスを乗せる（マウスオーバー）ときにインフォウィンドウを出す
たとえば下のように書けば、マーカーにマウスを乗せる（マウスオーバー）とインフォウィンドウが現れるようになります。
|
var point101 = new GLatLng(緯度, 経度);
var marker101 = new GMarker(point101[, アイコン変数]);
var html101= html文;
GEvent.addListener(marker101, "mouseover", function() {
marker101.openInfoWindowHtml(html101[, オプション変数])
});
map.addOverlay(marker101);
|
|
これまで、GEvent.addListenerの中のイベントの部分に"click"を指定してきました。上の例はそこを"mouseover"に代えています。この"mouseover"が、マーカーにマウスを乗せる（マウスオーバー）イベントを起こしたときに直後に書かれているopenInfoWindowHtmlを発動させるのです。
マーカークリックでインフォウィンドウを消す
マーカークリックでインフォウィンドウを消すためには、たとえば以下のような行を追加します。
|
GEvent.addListener(marker101, "click", function() {
map.closeInfoWindow()
});
|
|
GEvent.addListenerの"click"イベントを起こしたときに、closeInfoWindow()メソッドを発動させます。ここで注意しなくてはならないことは、closeInfoWindow()メソッドの前にある変数が、これまでと違っていることです。closeInfoWindow()メソッドは、地図を書き出す変数に対して使います。つまり、これまでの例で言えば、スクリプトの冒頭に
var map = new GMap2(document.getElementById("map"));
と書いていますが、この行が変数"map"を地図を書くための変数として用意しているのです。したがって、上の例ではこの行で使われている変数に対してcloseInfoWindow()メソッドを使わなければなりません。
例：マウスオーバーでウィンドウを出す＋クリックでウィンドウを消す
以上の二つを組み合わせた例を挙げてみます。例として、このようなスクリプトを書きました（アイコンを定義する行は省略しています）。赤字の部分でマーカーにマウスを乗せる（マウスオーバー）ときにインフォウィンドウを出して、青字の部分でマーカーをクリックしたときにインフォウィンドウを消します。下の具体例８で確認してください。
|
var infoopt = map.getInfoWindow();
infoopt.maxWidth = 100;
var point101 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker101 = new GMarker(point101, icon1);
var html101= '<img src="mitsu.png"><p><font size="3">明智光秀</font><p><font size="1">明智十兵衛。朝廷から惟任（これとう）の姓と日向守（ひゅうがのかみ）を賜り、惟任日向守と称される。<br>鉄砲の装備に熱心で、狭い平地での兵力集中決戦は自軍の強みを最も生かせる選択であっただろう。その意味では、この合戦の戦術的組み立ては間違っていなかった。しかし秀吉の反転が素早すぎて、勢いに押されて細川・筒井が離反してしまったことが余りに痛すぎた。もう少し敵側がぐずぐずしていたならば、一枚岩からは程遠い秀吉と織田信孝以下の諸将との間に離間策のくさびを打ち込むこともできたかもしれない。しかし秀吉は、そのような隙を作るような並の武将ではなかった。</font>';
GEvent.addListener(marker101, "mouseover", function() {
marker101.openInfoWindowHtml(html101,infoopt)
});
GEvent.addListener(marker101, "click", function() {
map.closeInfoWindow()
});
map.addOverlay(marker101);
|
|
マーカークリックでマーカーを中央に移動＆ズーム変更
GEvent.addListenerをたとえば以下のように書けば、マーカーをクリックするイベントを起こしたときにマーカーを中央に移動することができます。
|
var point101 = new GLatLng(緯度, 経度);
var marker101 = new GMarker(point101[, アイコン変数]);
var html101= html文;
GEvent.addListener(marker101, "click", function() {
map.setCenter(point101[, ズームレベル])
});
map.addOverlay(marker101);
|
|
この場合も、setCenterメソッドは、地図を書き出す変数（例では"map"）に対して使います。斜体で表したズームレベル（1～17）はオプションです。これを指定すれば、マーカーが中央に移動した上に指定のズームに変化します。
他にズームだけを変化させるために用意されているメソッドは、以下の三つです。すなわち、
| setZoom(ズームレベル) | ズームレベルを与えられた新しい値に設定します。 |
| zoomIn() | ズームを一段階拡大します。 |
| zoomOut() | ズームを一段階縮小します。 |
すなわち、たとえば、
|
GEvent.addListener(marker101, "click", function() {
map.setZoom(12)
});
|
|
のように書けば、マーカーをクリックした際に12段階目のズームに変化します。
マーカーダブルクリックでインフォウィンドウを出す（消す）
マーカーダブルクリックでインフォウィンドウを出すためには、たとえば以下のような行を追加します。
|
GEvent.addListener(marker101, "dblclick", function() {
marker101.openInfoWindowHtml(html101[, オプション変数])
});
|
|
このように、GEvent.addListenerの中のイベントの部分に"dblclick"を指定すれば、マーカーをダブルクリックしたときに、直後に書かれているopenInfoWindowHtmlが発動することになります。
そして、たとえば下のように書けば、マーカーをダブルクリックすれば地図からインフォウィンドウが消えます。
|
GEvent.addListener(marker101, "dblclick", function() {
map.closeInfoWindow()
});
|
|
例：マーカーを中央に移動＆ズーム変更＋ダブルクリックでウィンドウを出す
再び、以上の二つを組み合わせた例を挙げてみます。例として、このようなスクリプトを書きました（アイコンを定義する行は省略しています）。最初、アイコンを右下に、ズームを最大の17段階にセットしています。赤字の部分で、マーカーをクリックしたときにマーカーを中央に移動させた上でズームを16段階にセットします。青字の部分で、マーカーをダブルクリックしたときにインフォウィンドウを出します。下の具体例９で、右下にあるマーカーをクリック・ダブルクリックして確認してください。
|
var infoopt = map.getInfoWindow();
infoopt.maxWidth = 100;
var point101 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker101 = new GMarker(point101, icon1);
var html101= '<img src="mitsu.png"><p><font size="3">明智光秀</font><p><font size="1">明智十兵衛。朝廷から惟任（これとう）の姓と日向守（ひゅうがのかみ）を賜り、惟任日向守と称される。<br>鉄砲の装備に熱心で、狭い平地での兵力集中決戦は自軍の強みを最も生かせる選択であっただろう。その意味では、この合戦の戦術的組み立ては間違っていなかった。しかし秀吉の反転が素早すぎて、勢いに押されて細川・筒井が離反してしまったことが余りに痛すぎた。もう少し敵側がぐずぐずしていたならば、一枚岩からは程遠い秀吉と織田信孝以下の諸将との間に離間策のくさびを打ち込むこともできたかもしれない。しかし秀吉は、そのような隙を作るような並の武将ではなかった。</font>';
GEvent.addListener(marker101, "click", function() {
map.setCenter(point101, 16)
});
GEvent.addListener(marker101, "dblclick", function() {
marker101.openInfoWindowHtml(html101, infoopt)
});
map.addOverlay(marker101);
|
|
次回は、ユーザーがクリックした点に新たにマーカーを生成させる方法を検討します。他の機能との組合せ次第によっては、使える技となるかもしれません。