新聞稿：

住家空氣品質知多少？上網即可輕易查

2008/08/25 13:06:08
（中央社記者陳舜協台北2008年8月25日電）國人有過敏體質人數愈來愈多，加上外出旅遊、活動風氣日盛，對空氣品質的需求日益增加。鑑於國人需求，環保署環境監測及資訊處近期完成「測站資訊with Googlemap 」系統，結合Googlemap的親和界面，民眾只要輸入自家或出遊地點地址，就可輕易獲得即時空氣品質資訊。

監資處長朱雨其指出，「測站資訊with Google map」系統除提供即時空氣品質資訊，還提供最近24小時空氣品質預測及最近的空氣測站相關資料，提供民眾最符合實際需求的空氣品質資訊。

此外，監資處還新增空氣品質監測資料網路下載服務。朱雨其指出，監資處將歷年全台各測站資訊整理成套裝方式，方便民眾免費查詢、下載，以利各界分析或進行學術研究，有需要的民眾可多加利用。

自由時報＼2008/08/26＼生活新聞A8＼空氣品質 地圖e點就知

網址

http://taqm.epa.gov.tw/emc/default.aspx?mod=SiteGMap&pid=b0101&cid=b0102

使用技術：

• [Google Map]地址查詢(GClientGeocoder)
• [Google Map]自訂標籤圖示(GIcon)
• [Google Map]顯示訊息視窗[1](openInfoWindowHtml)
• 搭配後端測站位置及空氣品質資訊

在電視電影中的連續犯罪事件，常常可以看到偵探或警方在地圖上以犯罪現場為中心依地緣關係畫出圓形而展開調查。
即然能用GPolygon畫出多邊形，加點小小的計算我們也能畫出圓形，而且是可以指定半徑距離(如5公里)的圓！

程式碼

執行範例

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 10);
		// 畫圓！
		draw(5/*半徑,公里*/, 36/*以多少點畫圓*/);
	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

////pan and zoom to fit
var bounds = new GLatLngBounds();
function fit(){
	map.panTo(bounds.getCenter());
	map.setZoom(map.getBoundsZoomLevel(bounds));
}

//calling circle drawing function
function draw(givenRad, givenQuality){
	map.clearOverlays();
	bounds = new GLatLngBounds();
	var centre = map.getCenter()
	drawCircle(centre, givenRad, givenQuality);
	fit();
}

////////////////////////// circle///////////////////////////////
function drawCircle(center, radius, nodes, liColor, liWidth, liOpa, fillColor, fillOpa)
{
// Esa 2006
	//calculating km/degree
	var latConv = center.distanceFrom(new GLatLng(center.lat()+0.1, center.lng()))/100;
	var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng()+0.1))/100;

	//Loop
	var points = [];
	var step = parseInt(360/nodes)||10;
	for(var i=0; i<=360; i+=step)
	{
	var pint = new GLatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() +
	(radius/lngConv * Math.sin(i * Math.PI/180)));
	points.push(pint);
	bounds.extend(pint); //this is for fit function
	}
	fillColor = fillColor||liColor||"#0055ff";
	liWidth = liWidth||2;
	var poly = new GPolygon(points,liColor,liWidth,liOpa,fillColor,fillOpa);
	map.addOverlay(poly);
}

參考資料：

• Esa’s Google Maps API examples

將自己的元作放到地圖上。

Google API

• GControl : This interface is implemented by all controls. 實作這個介面。

程式碼

執行範例

function TwControl() {}
TwControl.prototype = new GControl();
// 起始
TwControl.prototype.initialize = function(map) {
    var container = document.createElement("div");

    container.appendChild(this.createButton("台灣",23.639492, 120.783691, 8));
    container.appendChild(this.createButton("馬祖",26.162083,119.941472, 10));
    container.appendChild(this.createButton("金門",24.429333,118.315389, 10));

    map.getContainer().appendChild(container);
    return container;
}
// 預設位置
TwControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}
// 建立按鈕
TwControl.prototype.createButton = function(name, lat, lng, zoom) {
    var div = document.createElement("div");
    this.setButtonStyle_(div);
    div.appendChild(document.createTextNode(name));
    GEvent.addDomListener(div, "click", function() {
      map.setCenter(new GLatLng(lat, lng), zoom);
    });
    return div;
}
// 設定按鈕樣式
TwControl.prototype.setButtonStyle_ = function(button) {
    button.style.textDecoration = "underline";
    button.style.color = "#0000cc";
    button.style.backgroundColor = "white";
    button.style.font = "small Arial";
    button.style.border = "1px solid black";
    button.style.padding = "2px";
    button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "6em";
    button.style.cursor = "pointer";
}

// 加入
map.addControl(new TwControl());

除了點(GMark)線(GPolyline)之後，我們還能表現面(GPolygon)！

Google API

• GPolygon : This is very similar to a GPolyline, except that you can additionally specify a fill color and opacity.
• 位置陣列中一定要封閉，即第一點和最後一點的座標要相同。

程式碼

執行範例

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 11);

		var points = [];
		points.push(new GLatLng(25.030000,121.490556)); // 萬華
		points.push(new GLatLng(25.035556,121.424722)); // 新莊
		points.push(new GLatLng(25.063611,121.518056)); // 中山
		points.push(new GLatLng(24.978889,121.529167)); // 新店
		points.push(new GLatLng(25.013611,121.466667)); // 板橋
		points.push(new GLatLng(25.030000,121.490556)); // 萬華(封閉)
		// 畫多邊形
		map.addOverlay(new GPolygon(points,'#FF0000',3,0.5,'#ffff00',0.5));
	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

除了用 mark 在地圖上標出座標外，我們還能在地圖上畫線表示路線等資訊。

Google API

• GPolyline : This is a map overlay that draws a polyline on the map, using the vector drawing facilities of the browser if they are available, or an image overlay from Google servers otherwise.

程式碼

執行範例：取得目前地圖的可視範圍，隨機加入10個標籤，並畫線

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);

		var bounds = map.getBounds();
		var southWest = bounds.getSouthWest(); // 返回矩形西南角的點
		var northEast = bounds.getNorthEast(); // 返回矩形東北角的點
		var lngSpan = northEast.lng() - southWest.lng();
		var latSpan = northEast.lat() - southWest.lat();
		var points = [];
		// 亂數取點
		for (var i = 0; i < 10; i++){
		    var point = new GLatLng(
		        southWest.lat() + latSpan * Math.random(),
		        southWest.lng() + lngSpan * Math.random());
		    points.push(point);
		    map.addOverlay(new GMarker(point));
		} // for
		// 排序
		points.sort(function(p1, p2) { return p1.lng() - p2.lng();});
		// 畫線！
		map.addOverlay(new GPolyline(points));
	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

地圖雖然可以隨意拖拉，但全世界那麼多怎樣才能最快找到目標呢？直接輸入地址查詢！

Google API

• GClientGeocoder : This class is used to communicate directly with Google servers to obtain geocodes for user specified addresses. In addition, a geocoder maintains its own cache of addresses, which allows repeated queries to be answered without a round trip to the server.
• .getLocations( address , callback ) 查詢地址。
• callback (result)
• result.Status.code == G_GEO_SUCCESS ： 判斷是否成功。
• result.Placemark.length ： 符合條件的位置數。
• result.Placemark[i].Point.coordinates[0]; ： lng
• result.Placemark[i].Point.coordinates[1]; ： lat
• result.Placemark[i].address; ： 地址

程式碼

執行範例

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
var geocoder = null;
function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		geocoder = new GClientGeocoder();

		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);
	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function showLocation() {
	// 清除marker
	map.clearOverlays();
	var address = document.getElementById('txtAddress').value;
	geocoder.getLocations(address, cb_showLocation);
}

function cb_showLocation(result) {
	// 顯示結果
	if (result.Status.code == G_GEO_SUCCESS)  {
		// 成功
		for (var i=0; i<result.Placemark.length; i++) {
			var lat = result.Placemark[i].Point.coordinates[1]; // lat
			var lng = result.Placemark[i].Point.coordinates[0]; // lng
			var address = result.Placemark[i].address; // 地址
			var point = new GLatLng(lat,lng);

			var marker=new GMarker(point, {title:i+1});;
			map.addOverlay(marker);
		} // for
	} // if
}

var status=[];
status[G_GEO_SUCCESS]            = "Success";
status[G_GEO_MISSING_ADDRESS]    = "Missing Address";
status[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address";
status[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address";
status[G_GEO_BAD_KEY]            = "Bad Key";
status[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries";
status[G_GEO_SERVER_ERROR]       = "Server Error";

透過GEvent，我們可以讓地圖上的物件與網頁元作互動，達到對使用者更友善的介面。

如本範例，當滑鼠移過(moveover)右側的站名方塊時地圖中對應的marker會變紅色，點(click)方塊時地圖會顯示訊息視窗。
若滑鼠移過(moveover)地圖中的marker相對應的站名方塊也會變黃底突顯。
當地圖內marker太多時這個技巧特別有用。

GEvent

• GEvent
  • .addListener
  • .trigger 觸發地圖內的事件

程式碼

執行範例

javascript

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
var arySite = new Array();

function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);

addSite(map,4,'新店',24.978889,121.529167,'台北縣新店市三民路36號',40,23,'懸浮微粒',0);
addSite(map,5,'土城',24.981667,121.451667,'台北縣土城市學府路一段241號',40,26,'懸浮微粒',0);
addSite(map,6,'板橋',25.012778,121.459167,'台北縣板橋市文化路一段25號',40,27,'懸浮微粒',0);
addSite(map,7,'新莊',25.034056,121.432583,'台北縣新莊市中正路510號',40,27,'臭氧',0);
addSite(map,8,'菜寮',25.064167,121.480556,'台北縣三重市中正北路135號',40,26,'懸浮微粒',0);
addSite(map,9,'林口',25.078333,121.368611,'台北縣林口鄉民治路25號',40,26,'臭氧',0);
addSite(map,10,'淡水',25.164694,121.449139,'台北縣淡水鎮中正東路42巷6號',40,21,'懸浮微粒',0);
addSite(map,11,'士林',25.105389,121.515139,'台北市北投區文林北路155號',40,37,'懸浮微粒',0);
addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',40,28,'懸浮微粒',0);
addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',40,22,'懸浮微粒',0);
addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',40,30,'懸浮微粒',0);
addSite(map,15,'松山',25.050833,121.578889,'台北市松山區八德路四段746號',40,23,'懸浮微粒',0);

	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
	var icon=new GIcon();
	icon.image="images/1.gif";
	icon.iconSize = new GSize(16,16);
	icon.iconAnchor = new GPoint(8,8);
	icon.infoWindowAnchor = new GPoint(8, 8);

	var mark = new GMarker(
		new GLatLng(lat,lng),
		{icon:icon, title:siteDesc}
		);

	arySite[siteCode] = mark;
	map.addOverlay(mark);
	GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('測站：'+siteDesc+'<br />地址：'+address);});
	GEvent.addListener(mark, "mouseover", function() {
		mark.setImage('images/1r.gif');
		document.getElementById('site'+siteCode).style.background='yellow';
		});
	GEvent.addListener(mark, "mouseout", function() {
		mark.setImage('images/1.gif');
		document.getElementById('site'+siteCode).style.background='white';
		});
}

html

<span class='site' id='site4'
	onclick='GEvent.trigger(arySite[4],"click")'
	onmouseover='GEvent.trigger(arySite[4],"mouseover")'
	onmouseout='GEvent.trigger(arySite[4],"mouseout")'>新店
</span>
<span class='site' id='site5' onclick='GEvent.trigger(arySite[5],"click")' onmouseover='GEvent.trigger(arySite[5],"mouseover")' onmouseout='GEvent.trigger(arySite[5],"mouseout")'>土城</span>
<span class='site' id='site6' onclick='GEvent.trigger(arySite[6],"click")' onmouseover='GEvent.trigger(arySite[6],"mouseover")' onmouseout='GEvent.trigger(arySite[6],"mouseout")'>板橋</span>
<span class='site' id='site7' onclick='GEvent.trigger(arySite[7],"click")' onmouseover='GEvent.trigger(arySite[7],"mouseover")' onmouseout='GEvent.trigger(arySite[7],"mouseout")'>新莊</span>
<span class='site' id='site8' onclick='GEvent.trigger(arySite[8],"click")' onmouseover='GEvent.trigger(arySite[8],"mouseover")' onmouseout='GEvent.trigger(arySite[8],"mouseout")'>菜寮</span>
<span class='site' id='site9' onclick='GEvent.trigger(arySite[9],"click")' onmouseover='GEvent.trigger(arySite[9],"mouseover")' onmouseout='GEvent.trigger(arySite[9],"mouseout")'>林口</span>
<span class='site' id='site10' onclick='GEvent.trigger(arySite[10],"click")' onmouseover='GEvent.trigger(arySite[10],"mouseover")' onmouseout='GEvent.trigger(arySite[10],"mouseout")'>淡水</span>
<span class='site' id='site11' onclick='GEvent.trigger(arySite[11],"click")' onmouseover='GEvent.trigger(arySite[11],"mouseover")' onmouseout='GEvent.trigger(arySite[11],"mouseout")'>士林</span>
<span class='site' id='site12' onclick='GEvent.trigger(arySite[12],"click")' onmouseover='GEvent.trigger(arySite[12],"mouseover")' onmouseout='GEvent.trigger(arySite[12],"mouseout")'>中山</span>
<span class='site' id='site13' onclick='GEvent.trigger(arySite[13],"click")' onmouseover='GEvent.trigger(arySite[13],"mouseover")' onmouseout='GEvent.trigger(arySite[13],"mouseout")'>萬華</span>
<span class='site' id='site14' onclick='GEvent.trigger(arySite[14],"click")' onmouseover='GEvent.trigger(arySite[14],"mouseover")' onmouseout='GEvent.trigger(arySite[14],"mouseout")'>古亭</span>
<span class='site' id='site15' onclick='GEvent.trigger(arySite[15],"click")' onmouseover='GEvent.trigger(arySite[15],"mouseover")' onmouseout='GEvent.trigger(arySite[15],"mouseout")'>松山</span>

參考資料：

• Esa’s Google Maps API experiments. ZMarker with color switching

這是另一種標籤加文字的方式。 覆寫 GOverlay 的 ELabel^#1。
本文同時示範如何計算兩點間的距離。

計算距離

distanceFrom

// 計算某一點距離台北火車站多遠
function distanceFrom(latlng) {
	var TS = new GLatLng(25.048708,121.516128); // 台北火車站
	var dist=TS.distanceFrom(latlng); // 距離
	dist=dist.toFixed(0)+"m"; // 公尺
	if(parseInt(dist)>10000) {
		// 若大於10公里則顯示為公里
		dist=(parseInt(dist)/1000).toFixed(1)+"km";
	}
	return dist;
}

程式碼

執行範例

ELabel

// http://koti.mbnet.fi/ojalesa/exam/elabel.js
// Version 0.2      the .copy() parameters were wrong
// version 1.0      added .show() .hide() .setContents() .setPoint() .setOpacity() .overlap
function ELabel(point, html, classname, pixelOffset, percentOpacity, overlap) {
	// Mandatory parameters
	this.point = point;
	this.html = html;

	// Optional parameters
	this.classname = classname||"";
	this.pixelOffset = pixelOffset||new GSize(0,0);
	if (percentOpacity) {
	  if(percentOpacity<0){percentOpacity=0;}
	  if(percentOpacity>100){percentOpacity=100;}
	}
	this.percentOpacity = percentOpacity;
	this.overlap=overlap||false;
} 

ELabel.prototype = new GOverlay();

ELabel.prototype.initialize = function(map) {
	var div = document.createElement("div");
	div.style.position = "absolute";
	div.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
	map.getPane(G_MAP_FLOAT_SHADOW_PANE).appendChild(div);
	this.map_ = map;
	this.div_ = div;
	if (this.percentOpacity) {
	  if(typeof(div.style.filter)=='string')
		{div.style.filter='alpha(opacity:'+this.percentOpacity+')';}
	  if(typeof(div.style.KHTMLOpacity)=='string')
		{div.style.KHTMLOpacity=this.percentOpacity/100;}
	  if(typeof(div.style.MozOpacity)=='string')
		{div.style.MozOpacity=this.percentOpacity/100;}
	  if(typeof(div.style.opacity)=='string')
		{div.style.opacity=this.percentOpacity/100;}
	}
	if (this.overlap) {
	  var z = GOverlay.getZIndex(this.point.lat());
	  this.div_.style.zIndex = z;
	}
}

ELabel.prototype.remove = function() {
	this.div_.parentNode.removeChild(this.div_);
}

ELabel.prototype.copy = function() {
	return new ELabel(this.point, this.html, this.classname,
	this.pixelOffset, this.percentOpacity, this.overlap);
}

ELabel.prototype.redraw = function(force) {
	var p = this.map_.fromLatLngToDivPixel(this.point);
	var h = parseInt(this.div_.clientHeight);
	this.div_.style.left = (p.x + this.pixelOffset.width) + "px";
	this.div_.style.top = (p.y +this.pixelOffset.height - h) + "px";
}

ELabel.prototype.show = function() {
	this.div_.style.display="";
}

ELabel.prototype.hide = function() {
	this.div_.style.display="none";
}

ELabel.prototype.setContents = function(html) {
	this.html = html;
	this.div_.innerHTML = '<div class="' + this.classname + '">' + this.html + '</div>' ;
	this.redraw(true);
}

ELabel.prototype.setPoint = function(point) {
	this.point = point;
	if (this.overlap) {
	  var z = GOverlay.getZIndex(this.point.lat());
	  this.div_.style.zIndex = z;
	}
	this.redraw(true);
}

ELabel.prototype.setOpacity = function(percentOpacity) {
	if (percentOpacity) {
	  if(percentOpacity<0){percentOpacity=0;}
	  if(percentOpacity>100){percentOpacity=100;}
	}
	this.percentOpacity = percentOpacity;
	if (this.percentOpacity) {
	  if(typeof(this.div_.style.filter)=='string')
		{this.div_.style.filter='alpha(opacity:'+this.percentOpacity+')';}
	  if(typeof(this.div_.style.KHTMLOpacity)=='string')
		{this.div_.style.KHTMLOpacity=this.percentOpacity/100;}
	  if(typeof(this.div_.style.MozOpacity)=='string')
		{this.div_.style.MozOpacity=this.percentOpacity/100;}
	  if(typeof(this.div_.style.opacity)=='string')
		{this.div_.style.opacity=this.percentOpacity/100;}
	}
}

javascript

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;

function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		map.setMapType(G_SATELLITE_MAP);
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);

addSite(map,12,'中山',25.062361,121.526194);
addSite(map,13,'萬華',25.030000,121.490556);
addSite(map,14,'古亭',25.020833,121.528611);

	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function addSite(map, siteCode, siteDesc, lat, lng) {
	var latlng = new GLatLng(lat,lng);
	var mark = new GMarker(latlng,{title:siteDesc,draggable:true});
	map.addOverlay(mark);

	// point, html, classname, pixelOffset, percentOpacity, overlap
	var label = new ELabel(latlng, siteDesc+"(draggable)","labelstyle",new GSize(2,20),80);
	map.addOverlay(label);

	GEvent.addListener(mark,"drag",function(){
		label.setPoint(mark.getPoint());

		var TS = new GLatLng(25.048708,121.516128);
		var dist=TS.distanceFrom(mark.getPoint());
		dist=dist.toFixed(0)+"m";
		if(parseInt(dist)>10000){dist=(parseInt(dist)/1000).toFixed(1)+"km";}
		label.setContents(siteDesc+"("+dist+")");
	});
}

參考資料：

1. Esa’s Google Maps API examples

標籤除了用圖之外還能加文字嗎？可以！
覆寫 GMarker 的 LabeledMarker^#1 讓你不用為每個地點製作特別做一張圖示！

程式碼

執行範例

LabeledMarker

// http://googlemapsbook.com/2007/01/22/extending-gmarker/
/* Constructor for an extended Marker class */
function LabeledMarker(latlng, options){
    this.latlng = latlng;
    this.labelText = options.labelText || "";
    this.labelClass = options.labelClass || "markerLabel";
    this.labelOffset = options.labelOffset || new GSize(0, 0);
    GMarker.apply(this, arguments);
}

/* It's a limitation of JavaScript inheritance that we can't conveniently
   extend GMarker without having to run its constructor. In order for the
   constructor to run, it requires some dummy GLatLng. */
LabeledMarker.prototype = new GMarker(new GLatLng(0, 0));

// Creates the text div that goes over the marker.
LabeledMarker.prototype.initialize = function(map) {
	// Do the GMarker constructor first.
	GMarker.prototype.initialize.call(this, map);

	var div = document.createElement("div");
	div.className = this.labelClass;
	div.innerHTML = this.labelText;
	div.style.position = "absolute";
	map.getPane(G_MAP_MARKER_PANE).appendChild(div);

	this.map = map;
	this.div = div;
}

// Redraw the rectangle based on the current projection and zoom level
LabeledMarker.prototype.redraw = function(force) {
	GMarker.prototype.redraw.call(this, map);

	// We only need to do anything if the coordinate system has changed
	if (!force) return;

	// Calculate the DIV coordinates of two opposite corners of our bounds to
	// get the size and position of our rectangle
	var p = this.map.fromLatLngToDivPixel(this.latlng);
	var z = GOverlay.getZIndex(this.latlng.lat());

	// Now position our DIV based on the DIV coordinates of our bounds
	this.div.style.left = (p.x + this.labelOffset.width) + "px";
	this.div.style.top = (p.y + this.labelOffset.height) + "px";
	this.div.style.zIndex = z + 1; // in front of the marker
}

// Remove the main DIV from the map pane
LabeledMarker.prototype.remove = function() {
  this.div.parentNode.removeChild(this.div);
  this.div = null;
  GMarker.prototype.remove.call(this);
}

javascript

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
var arySite = new Array();

function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 11);

addSiteX(map,6,'板橋',25.012778,121.459167,'台北縣板橋市文化路一段25號',40,27,'懸浮微粒',0);
addSiteX(map,10,'淡水',25.164694,121.449139,'台北縣淡水鎮中正東路42巷6號',40,21,'懸浮微粒',0);
addSiteX(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',40,30,'懸浮微粒',0);

	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function addSiteX(map, siteCode, siteDesc, lat, lng, address, type) {
	var icon=new GIcon();
	icon.image="images/red-marker.png";
	icon.iconSize = new GSize(32, 32);
	icon.iconAnchor = new GPoint(16, 16);
	opts = {
		"icon": icon,
		"clickable": false,
		"draggable": false,
		"labelText": siteDesc,
		"labelOffset": new GSize(-16, -16)
	};
	var mark = new LabeledMarker(new GLatLng(lat, lng), opts); 

	arySite[siteCode] = mark;
	map.addOverlay(mark);

	mark.div.onclick = function() {alert('測站：'+siteDesc+'\n地址：'+address);};
}

參考資料：

1. Extending The API To Create Labeled Markers at Beginning Google Maps Applications

如果我們能在地圖上標上加油站之類的圖示就能更直覺的表達訊息。

GIcon

• GIcon 標籤的圖示
  • .image 圖示的網址
  • .iconSize 大小，如 new GSize(16,16)
  • .iconAnchor 定位，如 new GPoint(8,8)
  • .infoWindowAnchor 訊息視窗定位，如 new GPoint(8, 8)
    若沒有指定會無法顯示訊息視窗

程式碼

執行範例

google.load("maps", "2.x");
google.setOnLoadCallback(initialize);

var map = null;
function initialize() {
	// 檢查瀏覽器是否可使用 Google Map API
	if ( GBrowserIsCompatible() ) {
        map = new google.maps.Map2(document.getElementById('map'));
		// 設定地圖中心點
		map.setCenter(new GLatLng(25.036772,121.520269), 12);

addSite(map,12,'中山',25.062361,121.526194,'台北市中山區林森北路511號',1);
addSite(map,13,'萬華',25.030000,121.490556,'台北市萬華區莒光路315號',2);
addSite(map,14,'古亭',25.020833,121.528611,'台北市中正區羅斯福路三段153號',3);

	} // if
	else {
		alert('您的瀏覽器不支援Google Map');
	} // else
}

function addSite(map, siteCode, siteDesc, lat, lng, address, type) {
	var icon=new GIcon();
	icon.image="images/"+type+".gif";
	icon.iconSize = new GSize(16,16);
	icon.iconAnchor = new GPoint(8,8);
	icon.infoWindowAnchor = new GPoint(8, 8);

	var mark = new GMarker(
		new GLatLng(lat,lng),
		{icon:icon, title:siteDesc}
		);
	map.addOverlay(mark);
	GEvent.addListener(mark, "click", function() {mark.openInfoWindowHtml('地址：'+address);});
}