程式碼

[script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAASRbu-I-revphOHBVIlKvjxRX9p3Zpny0Vf0YqTSpvajfGPNWjBRKbyt98n33h6ua47h4UM5JyqNWmA" type="text/javascript"][/script]
[script type="text/javascript"]

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
//map.addControl 是在地圖上面有很多的控制鍵，像是可以平移地圖、放大或縮小跟衛星或道路的地面。
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.enableScrollWheelZoom();
map.setCenter(new GLatLng( 24.9570339159626, 121.24240110016), 17, G_HYBRID_MAP);
//G_NORMAL_MAP 地圖 G_SATELLITE_MAP 衛星 G_HYBRID_MAP 混合地圖

GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
var icon = new GIcon();
icon.image="http://www.smes.tyc.edu.tw/~learn/images/arrow_0010.gif";
icon.iconSize = new GSize(32, 32);
icon.iconAnchor = new GPoint(15, 30);
icon.infoWindowAnchor = new GPoint(5, 1);
var moto = new GIcon();
moto.image="http://yll.loxa.edu.tw/gificon/ride/motor/motor_0003.gif";
moto.iconSize = new GSize(32, 32);
moto.iconAnchor = new GPoint(15, 30);
moto.infoWindowAnchor = new GPoint(5, 1);

map.addOverlay(new GMarker(new GLatLng(24.9553,121.2445), moto));

var lat = ["24.9557","24.95631","24.95730","24.95765"];
var lng = ["121.243891","121.2426","121.2407","121.24075"];
function createMarker(point,number) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("node number: " + number + " ");
}); //end GEvent.addListener
return marker;
} //end createMarker(number)
var points = new Array();
for (var i = 0; i < 4; i++) {
var point = new GLatLng(lat[i],lng[i]);
points.push(point);
map.addOverlay(createMarker(point,i));
}
var polyline = new GPolyline(points,"#0057AE", 10,0.5);
map.addOverlay(polyline);

var polygon = new GPolygon([new GLatLng(24.9557,121.2441),new GLatLng(24.9555,121.24476),new GLatLng(24.955245,121.24472),new GLatLng(24.9552,121.2442),new GLatLng(24.9557,121.2441)], "#f33f00", 5, 1, "#ff0000", 0.1);
map.addOverlay(polygon);
//polygon的顯示方法，從左邊第一個點開始，接著連到第二個點..以此類推，
//而最後一個是第一個點，這樣就連成一個圈。
}//end if
}
//**************************** 分隔線 *******************************]
[body onload="initialize()" onunload="GUnload()"]
[div id="map_canvas" style="width: 800px; height: 500px ; "][/div]
[div id="message"][/div]
[/body]