AJAXのお勉強

Googleマップ マウスオーバー、マウスアウト＠AJAX

Googleマップに、マウスオーバー、マウスアウトのイベントを追加します。

GEvent.addListenerにて追加できます。
GEvent.addListener(オブジェクト, "mouseover", メソッド)
GEvent.addListener(オブジェクト, "mouseout", メソッド)
となります。

以下では、マーカーを作成し、
マーカーに対して、マウスオーバー、マウスアウトのイベントを追加しています。

マウスオーバーされたら、吹き出しを表示。
マウスアウトで吹き出しを消します。


<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Googleマップ API マウスオーバー、マウスアウト</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=****" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

function load() {
    if (GBrowserIsCompatible()) {

        //二条城の緯度、経度
        var point = new GLatLng(35.013253,135.750897);

        //GMap2生成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(point, 14);

        //縮尺、移動コントロール追加
        map.addControl(new GSmallMapControl());

        //マーカー
        var marker = new GMarker(point)
        map.addOverlay(marker);
            
        //マーカーにマウスオーバーイベント追加
        GEvent.addListener(marker, "mouseover", function() {
            //吹き出し表示
            marker.openInfoWindowHtml("<div style='width:50px;hieght:50px'>二条城</div>");
        });
        
        //マーカーにマウスアウトイベント追加
        GEvent.addListener(marker, "mouseout", function() {
            //吹き出し非表示
            marker.closeInfoWindow();
        });
    }
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 400px; height: 400px"></div>
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.