AJAXのお勉強

Googleマップ 線を引く＠AJAX

Googleマップ上に線を引きます。
GPolylineを生成し、addOverlayで追加します。

GPolyline(位置の配列,色,線の幅,線の透過度)
となります。

以下の様な形です。
GLatLngを3つ作成し、配列に格納します。
GPolylineを生成て、オーバーレイに追加しています。
色:#555555、幅：5、透過度:0.8で設定しています。
var polyline = new GPolyline(points,"#555555", 5, 0.8);
map.addOverlay(polyline);



<!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 points = new Array();
        points[0] = new GLatLng(35.681099,139.767084);
        points[1] = new GLatLng(35.69048511140501,139.70060348510742);
        points[2] = new GLatLng(35.657784419595906,139.7014617919922);

        //GMap2生成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(points[0], 12);
        
        //マーカー
        var marker = new GMarker(points[0])
        map.addOverlay(marker);
        
        //GPolylineで線を引く
        var polyline = new GPolyline(points,"#555555", 5, 0.8);
        map.addOverlay(polyline);

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

//]]>
</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.