AJAXのお勉強

Googleマップ 吹き出しを追加＠AJAX

Googleマップを表示して、吹き出しを追加します。

いくつかあるのですが、GMap2のopenInfoWindowHtmlを利用します。
openInfoWindowHtmlにおいて、吹き出しにHTML文を追加できます。

以下の記述を追加するだけです。
map.openInfoWindowHtml(位置,HTML文);


以下では、東京駅を中心にマップを表示します。
東京駅に吹き出しを追加します。

追加する吹き出しのHTML文は、
DIVタグに東京駅の住所を表示しています。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Googleマップ 吹き出しを追加</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=******" type="text/javascript"></script>
<script type="text/javascript">

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

        //東京駅の位置
        var point = new GLatLng(35.681099, 139.767084);

        //東京駅を中心にマップ作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(point, 15);

        //東京駅にマーク
        map.addOverlay(new GMarker(point));

        //東京駅に吹き出しを追加
        map.openInfoWindowHtml(point,
                "<div style='width:200px'>東京駅です。<BR>住所は東京都千代田区丸の内一丁目9番1号です。</div>");

        //縮尺移動のコントロールを設置
        map.addControl(new GSmallMapControl());

    }
}

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

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