Google Map API

撰寫者:陳志華

Google Map API
Hello World
下面的網頁會顯示一個以交通大學為中心,大小 800 * 600 的地圖:
<!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 Maps JavaScript API Example: simple</title>
<script
src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAEfCuQGsNiSW
xRgf_vfNWaRQjskl1YgiA_BGX2yRrf7htVrbmBTEB0IH-F489GrwP8-dHLib7cKKIQ"
type="text/javascript">
</script>
<script type="text/javascript">
function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
}
}
//]]>
</script>
</head>
<body onload="onLoad()">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

Google Map API

撰寫者:陳志華

嵌入 Google Map API
在上述範例中所列出的 URL(http://maps.google.com/maps?file=api&v=1)是用來在
網頁中嵌入 Google Map 電子地圖前所必須載入 Javascript 檔的網址。網頁必須包
含一個指向此 URL 的<script> tag,同時搭配上所申請的授權碼,如果得到的授
權碼是「abcdefg」,則寫法會像下面這樣:
<script src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"
type="text/javascript">
</script>
其中 v=1 的部份表示目前使用的是 v1 版的 Google Map API,此一 URL 會自動
在網頁中嵌入 v1 版目前最新的 API,若未來推出 v2 版 API 時,只需要將 v=1
更改為 v=2 即可切換為嵌入 v2 版 API。
基本
下面的範例(跟前面提過的相同)會產生一個以交通大學為中心的地圖,可以自由
的用滑鼠拖曳此地圖。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
改變地圖中心位置
panTo 函式是用來設定地圖的中心位置,若新的中心點位置有包含在目前的地圖
顯示範圍內時,地圖以滑動的方式移至新中心點,反之則會直接跳至新的中心點
位置。
下面的範例會先顯示交通大學的地圖,然後在兩秒後移動到向東 0.003 度(經度)
的地方。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
window.setTimeout(function() {
map.panTo(new GLatLng (24.7847, 121.0021));
}, 2000);

Google Map API

撰寫者:陳志華

為地圖加上控制列
如果要在地圖上加上可以操作地圖的控制列,必須使用 addControl 函式,在下面
的範例中在地圖中加上了一個簡易的縮放工具列 GSmallMapControl()及一個衛
星地圖切換工具列 GMapTypeControl()。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
結合 Google Earth
如果要在地圖上加上可以操作地圖的控制列,必須使用 addControl 函式,在下面
的範例中在地圖中加上 3D 衛星地圖 G_SATELLITE_3D_MAP,並加入完整的縮
放 工 具 列 GLargeMapControl() 及 一 個 3D 衛 星 地 圖 切 換 工 具 列
GHierarchicalMapTypeControl()。
var map = new GMap2(document.getElementById("map"));
map.addMapType(G_SATELLITE_3D_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GHierarchicalMapTypeControl());
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
結合路徑規劃
如果要在地圖上加入路徑規劃之路線和道路資訊,必須先於網頁中加入<div>標
籤,並命名其 id 名稱以供後續存放道路資訊(以下以<div id="route">為例),再使
用 GDirections 類別產生路徑規劃物件,最後再呼叫 load()函式,並輸入起點座標
(from)和終點座標(to),在下面的範例中在地圖中加入路徑規劃功能。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load(
"from: "+y1+","+x1+" to: "+y2+","+x2, // from 起點座標和 to 終點座標
{travelMode:G_TRAVEL_MODE_DRIVING} // 採用開車模式
);

Google Map API

撰寫者:陳志華

監聽事件(event)
Google Map 物件支援事件監聽的功能,想要監聽特定的事件,只要呼叫 Google
Map 的 addListener 函式,傳入要監聽的事件種類以及事件發生時負責處理的函
式做為參數即可。在下面的範例中,只要每次有人拖曳地圖之後,地圖下方名為
message 的 DIV 中就會顯示出目前地圖中心點的經緯度坐標。
var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, 'moveend', function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
開啟訊息視窗
要在地圖上開啟訊息視窗,可以呼叫 openInfoWindow 函式,傳入要開啟訊息視
窗的坐標點以及要顯示在視窗內的 HTML 內容為參數即可。通常會在地標
(marker)上開啟訊息視窗,但其實在地圖上的任何地點都可以開啟訊息視窗。下
面的範例會在地圖的中心點開啟一個顯示有 Hello World 的訊息視窗。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
結合即時影像
結合地圖上訊息視窗,可以呼叫 openInfoWindow 函式,傳入訊息視窗的坐標點
以及要顯示在視窗內的 HTML iframe 內容為參數即可。通常會在地標(marker)上
開啟訊息視窗,但其實在地圖上的任何地點都可以開啟訊息視窗。下面的範例會
在 地 圖 的 中 心 點 開 啟 一 個 顯 示 有 交 通 控 制 中 心 即 時 影 像
(http://tms.bote.taipei.gov.tw/TTC/box/cctvbox.aspx?sid=TaipeiCCTV_48) 的 訊 息 視
窗。
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
map.openInfoWindow(map.getCenter(),'<iframe
weight="300"
height="250"
src="http://tms.bote.taipei.gov.tw/TTC/box/cctvbox.aspx?sid=TaipeiCCTV_48"></ifr
ame>');

Google Map API

撰寫者:陳志華

增加地標及線段
要在地圖上某個坐標的位置增加地標,首先要產生一個代表該坐標的 GLatLng
物件,然後用這個 GLatLng 物件來產生一個 GMarker 物件,最後再把這個
GMarker 傳給 addOverlay 函式即可;若要在地圖上增加任意折線段的話,則要先
將此折線段所有經過的轉折點坐標存成一個 GLatLng 陣列,再用此坐標陣列來
產生一個 GPolyline 物件,最後同樣呼叫 addOverlay 函式即可。下面的範例會在
地圖上隨機產生十個地標,並依序將這十個地標用一折線段連接起來。
// Center the map on Palo Alto.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
// Add 10 markers in random locations on the map
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++) {
points.push(new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random()));
map.addOverlay(new GMarker(points[i]));
}
// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));

Google Map API

撰寫者:陳志華

Click 處理
要處理地圖上的 click 事件,同樣要呼叫 Gmap2 的 addListener 函式並傳入'click'
事件類型。在下面的範例中,當在地圖的任何地方 click 一下,程式會自動在 click
的地方增加一個地標,反之若是在地標上 click 一下,程式就會將該地標移除。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else {
map.addOverlay(new GMarker(point));
}
});

Google Map API

撰寫者:陳志華

在地標上顯示訊息視窗
在下面的範例中,藉由監聽每個地標的 click 事件來在每個地標上開啟各自不同
的訊息視窗。
// Center the map on Palo Alto.
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(24.7847, 120.9991), 13);
// Create a marker whose info window displays the given number.
function createMarker(point, number) {
var marker = new GMarker(point);
// Creates a marker at the given point with the given number label
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #<b>" + number + "</b>");
});
return marker;
}
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}

Google Map API

撰寫者:陳志華

自訂地標圖示
下面的範例會教如何利用自訂的圖示來呈現地標,必須在程式中指定新圖示的圖
檔位置、圖示大小、圖示與地標實際對齊的位置(iconAnchor)以及訊息視窗與圖
示對齊的位置(infoWindowAnchor)等資料才能利用新的圖示來表示地標。
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, icon));
}
參考文獻
[1] Google Maps API,Google,2009 年。
URL: http://www.google.com/apis/maps/documentation/
[2] UrMap API v1.06 說明文件,友邁科技,2006 年。
URL: http://www.urmap.com/SearchEngine/api/documentation/

Sign up to vote on this title
UsefulNot useful