15-4 counter.php
16. Google Map初探
一、Gmap基本結構
1.申請金鑰：http://code.google.com/intl/zh-TW/apis/maps/signup.html
2.API手冊：http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html
3.API範例：http://code.google.com/apis/ajax/playground/#map_simple
4.頁面檔頭以「標準相容模式」呈現網頁，在不同瀏覽器之間的行為較為統一，在 XHTML 文件中加入 VML 命名空間，讓每個行為在 IE中都可以正常運作 ：
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
5.套用金鑰，並載入Google Map第二版的API。Gmap的座標：（緯度,經度）：
<script type="text/javascript" src="http://www.google.com/jsapi?key=金鑰"></script>
<script type="text/javascript">
google.load("maps", "2");
//頁面載入完成後，執行以下函數（定位地圖起點）
function initialize() {
var map = new google.maps.Map2(document.getElementById("my_map"));
map.setCenter(new google.maps.LatLng(23.009513 , 120.211242), 17);
}
google.setOnLoadCallback(initialize);
</script>
6.為避免耗損記憶體，離開頁面時，請加入 onunload="GUnload()"
<body onunload="GUnload()">
<div id="my_map" style="width: 700px; height: 400px"></div>
二、加上標記（請放到initialize()之中）
var point = new GLatLng(23.009513 , 120.211242);
map.addOverlay(new Gmarker(point));
三、地圖屬性
G_NORMAL_MAP（一般）、G_SATELLITE_MAP（衛星）、G_HYBRID_MAP（混合）、G_PHYSICAL_MAP（地形）、G_DEFAULT_MAP_TYPES（這三種類型的陣列）
map.setMapType(地圖屬性);
四、資訊視窗（地圖屬性勿用G_DEFAULT_MAP_TYPES）
map.openInfoWindow(point, "這裡就是延平國中啦～");
map.openInfoWindowHtml(point, "<b>這裡就是延平國中啦～<b>");
五、[控制項]地圖控制項目（用addControl()來新增控制項）
1.GLargeMapControl（大型平移/縮放控制項）、GSmallMapControl （小型平移/縮放控制項。按照預設）、GSmallZoomControl （小型縮放控制項）。
2.GScaleControl - 地圖比例尺
3.GMapTypeControl（切換地圖）、removeMapType（刪按鈕）、addMapType（加按鈕）
4.GOverviewMapControl - 位於畫面角落、可摺疊的總覽地圖
5.GHierarchicalMapTypeControl （自訂控件用的）
map.addControl(new GLargeMapControl());
map.removeMapType(G_SATELLITE_MAP);
map.addMapType(G_PHYSICAL_MAP);
六、[控制項]調整地圖控制項目位置（用GControlPosition()來新增控制項）
G_ANCHOR_TOP_RIGHT（上右）、G_ANCHOR_TOP_LEFT（上左）、G_ANCHOR_BOTTOM_RIGHT（下右）、G_ANCHOR_BOTTOM_LEFT（下左）
var topleft=new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,5));
map.addControl (new GMapTypeControl(),topleft);
七、[事件]顯示中心點座標
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
<div id='message'></div>
八、[事件]為可移動的節點加入資訊
1.mousedown：滑鼠按下時
2.mouseup：放開滑鼠時
3.click：按一下滑鼠時
4.dragstart：開始拖曳標記時
5.drag：拖曳標記時
6.dragend：結束拖曳標記時
var marker = new Gmarker(point , {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
//移動時，要做的事情
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
//移動後要做的事情
});
九、自訂標記外觀
1.圖示下載：http://code.google.com/p/google-maps-icons/
var myIcon = new Gicon(G_DEFAULT_ICON); //定義標記圖示
myIcon.image = "icons/school.png"; //圖示的前景圖片網址。
myIcon.iconSize = new GSize(32, 37); //圖示的前景圖片大小（以像素為單位）。
myIcon.iconAnchor = new GPoint(16, 37); //此圖示錨定至地圖的位置（相對於圖示圖片左上角）
myIcon.infoWindowAnchor = new Gpoint(16,37); //資訊視窗錨定至此圖示的位置（相對於圖示圖片左上角）
markerOptions = { icon: myIcon ,draggable: true };
var marker=new GMarker(point,markerOptions);
十、頁籤資訊視窗
http://code.google.com/intl/zh-TW/apis/maps/documentation/reference.html#GInfoWindowOptions
InfoWindowOptions={maxWidth:150}
var tab1 = new GInfoWindowTab("標籤名稱1", "內容1");
var tab2 = new GInfoWindowTab("標籤名稱2", "內容2");
var infoTabs = [tab1,tab2];
marker.openInfoWindowTabsHtml(infoTabs,InfoWindowOptions);
