原文鏈接：http://coolshell.cn/?p=1561 （酷殼）
在過去的一年中，在線地圖的發展是相當巨大，我們可以看到在線地圖的極有價值的信息和其能力。這其中，最有名氣的自然是Google Maps。. Google Maps由一個相當強大的開發引擎並也有一個很大的社區提示支持。
Google 允許各種web masters 通過Google Maps API來增加或自定義他們站點特定的地圖，你可能從這裏取得Google API key 。一個地圖 API key只對一個“目錄”或域有效。key綁定了你的域名，你要在網站上放地圖，需要有對應的key，否則拒絕讀取地圖數據，在本地測試可以不用key。當然，你可以申請多個API key。
創建一個簡單的地圖
在你的站點上引入Google Maps 是一件很簡單的事情，你只需要加入：
- 引入Google的JavaScript 文件
- 設置JavaScript 一些參數
- 一個你需要顯示地圖的HTML layer
Google的Javascript文件引入:
1.<script 2. charset="UTF-8"3. src=http://maps.google.com/maps?file=api&v=2&hl=en&oe=utf-8&key=API_KEY 4. type="text/javascript"> 5.</script>注意： 我們可以改變語言，比如說，把“hl=en” 改成中文“hl=zh-CN” 。我們還得要把“API_KEY” 改成我們向Google申請來的那個。
說明: 使用 UTF-8 編碼會更好些。
設置地圖參數:
這是你可定製有個性化的Google Maps的地方。我們可以增加一些參數來改變地圖的樣式。例如，我們可以設置地圖的載入和顯示的座標。下面是相關的代碼：
1.function initialize() { 2. if (GBrowserIsCompatible()) { 3. var map = new GMap2(document.getElementById("map_canvas")); 4. map.setCenter(new GLatLng(37.97918, 23.71665), 13); 5. map.setUIToDefault(); 6. } 7.}請注意上面高亮的那一條語句，第一個是緯度座標和第二個是經度座標，“13” 表示地圖縮放的程度，這個值可以取1 到17。
要知道所在地點的緯度和經度，你可以使用這個工具，這個工具很容易使用，只需要把地圖移到你想要的區域，然後，把鼠標放在中心就可以了。
地圖標記
你可以在地圖上放上一個標記來標出一個特定的位置，下面是一個示例代碼。
1.var point = new GLatLng(37.97110, 23.72601); 2.map.addOverlay(new GMarker(point));於是，我們整個代碼看起來是下面這個樣子：
01.function initialize() { 02. if (GBrowserIsCompatible()) { 03. var map = new GMap2(document.getElementById("map_canvas")); 04. map.setCenter(new GLatLng(37.97918, 23.71665), 13); 05. var point = new GLatLng(37.97110, 23.72601); 06. map.addOverlay(new GMarker(point)); 07. map.setUIToDefault(); 08. } 09.}上面的示例把我們的地圖的中心放在了希臘雅典，標記了雅典衛城。
氣球提示
氣球提示一個很不錯的界面，他可以用於放置一些小提示或或是一些信息。例如，下面的代碼將放置一個在雅典衛城山上放一個氣球提示來顯示一些信息：
01.function initialize() { 02. if (GBrowserIsCompatible()) { 03. var map = new GMap2(document.getElementById("map_canvas")); 04. map.setCenter(new GLatLng(37.97110, 23.72601), 13); 05. var html = "Parthenon 帕臺農神廟, 地址: Acropolis Hill"; 06. map.openInfoWindow(map.getCenter(), 07. document.createTextNode(html)); 08. map.setUIToDefault(); 09. } 10.}活動標記
我們可以合併一些標記和氣球提示來創建一個活動標記，這樣一來，我們可以達到這樣的效果——當用戶點擊某個標記的時候纔會顯示提示。代碼如下所示：
01.function initialize() { 02. if (GBrowserIsCompatible()) { 03. var map = new GMap2(document.getElementById("map_canvas")); 04. map.setCenter(new GLatLng(37.97918, 23.71665), 13); 05. var baseIcon = new GIcon(G_DEFAULT_ICON); 06. baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"
; 07. baseIcon.iconSize = new GSize(20, 34); 08. baseIcon.shadowSize = new GSize(37, 34); 09. baseIcon.iconAnchor = new GPoint(9, 34); 10. baseIcon.infoWindowAnchor = new GPoint(9, 2); 11. 12. function createMarker(point, index) { 13. var redIcon = new GIcon(baseIcon); 14. redIcon.image = "http://www.google.com/mapfiles/marker.png"
; 15. markerOptions = { icon:redIcon }; 16. var marker = new GMarker(point, markerOptions); 17. GEvent.addListener(marker, "click", function() { 18. marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill"); 19. }); 20. return marker; 21. } 22. 23. var latlng = new GLatLng(37.97110, 23.72601); 24. map.addOverlay(createMarker(latlng)); 25. } 26.}讓我來梳理一下上面的代碼。下面的部分是在標記下增加一個陰影：
1.var baseIcon = new GIcon(G_DEFAULT_ICON); 2.baseIcon.shadow = “http://www.google.com/mapfiles/shadow50.png”; 3.baseIcon.iconSize = new GSize(20, 34); 4.baseIcon.shadowSize = new GSize(37, 34); 5.baseIcon.iconAnchor = new GPoint(9, 34); 6.baseIcon.infoWindowAnchor = new GPoint(9, 2);標記的Action是在這裏設置的：
01.function createMarker(point, index) { 02. var redIcon = new GIcon(baseIcon); 03. redIcon.image = "http://www.google.com/mapfiles/marker.png"; 04. markerOptions = { icon:redIcon }; 05. var marker = new GMarker(point, markerOptions); 06. GEvent.addListener(marker, "click", function() { 07. marker.openInfoWindowHtml("Parthenon, Address: Acropolis Hill"); 08. }); 09. return marker; 10.}這裏是我們的標記的座標：
1.var latlng = new GLatLng(37.97110, 23.72601); 2.map.addOverlay(createMarker(latlng));載入地圖
我們可以通過兩種方法載入地圖。我們可以讓地圖在整網頁載入時載入（通過使用body的load事件），也可以把載入過程賦給其它事件。下面的兩個方法是我們需要注意的：
- initialize() 載入地圖
- GUnload() 卸載地圖以釋放內存
我們當然還需要使用HTML的DIV標籤來指定一個ID，這樣才能被JavaScript使用，在我們的示例中，我們使用“map_canvas”。我們也能使用CSS來渲染這個DIV層。
定製地圖
你可以使用自定義的標記和陰影。有兩個工具可以幫助你創建這些圖標—— 地圖標記 和 陰影。你也可以使用HTML和CSS來定義氣球提示。
加入多個標記並分組
我們可以標記多個地點，並可以把它們根據我們的需要分組。這樣一來，我們可以通過不同的標記圖標來顯示地點的不同屬性，比如：酒店，車站等。要做到這樣，我們只需要使用一個XML文件，一個簡單的XML文件如下所示：
01.<markers> 02.<marker03. name="標題"04. label="這是一個標籤"05. desc="氣球提示的描述"06. lat="37.97167" lng="23.72581"07. type="標籤的種類，如 Bridge"08. address="地址信息"09. icona="圖標"10./> 11.</markers>你可以在這個XML文件中加入多個地點信息。有一件事你需要小心的是，當出現一一些特定字符時（比如單引號，雙引號，“#@$<>”等），你需要使用HTML的轉義。
使用這XML的腳本如下：
1.<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/labeledmarker/release/src/labeledmarker.js" type="text/javascript"></script>當然，你需要設置一些參數：
01.var iconRed = new GIcon(); 02.iconRed.image = '../img/marker-red.png'; 03.iconRed.shadow = ''; 04.iconRed.iconSize = new GSize(32, 32); 05.iconRed.shadowSize = new GSize(22, 20); 06.iconRed.iconAnchor = new GPoint(16, 16); 07.iconRed.infoWindowAnchor = new GPoint(5, 1); 08.var customIcons = []; 09. 10.customIcons["ancient"] = iconRed; 11.var markerGroups = { "ancient": []};上面，我們給customIcons 的“ancient”屬性設置成了iconRed ，於是我們應該在我們的XML文件中使用類型(ancient) ，如果我們把這個XML文件命名爲： markers.xml，那麼，我們的代碼如下：
01.GDownloadUrl("markers.xml", function(data) { //We tell Google Maps to load our file 02. var xml = GXml.parse(data); 03. var markers = xml.documentElement.getElementsByTagName("marker"); //and read markers 04. for (var i = 0; i < markers.length; i++) { 05. var name = markers[i].getAttribute("name"); //From here down we assign variables. 06. var label = markers[i].getAttribute("label"); 07. var desc = markers[i].getAttribute("desc"); 08. var address = markers[i].getAttribute("address"); 09. var type = markers[i].getAttribute("type"); 10. var icona = markers[i].getAttribute("icona"); 11. var point = new GlatLng(parseFloat(markers[i].getAttribute("lat")), //and we set the lat-long 12. parseFloat(markers[i].getAttribute("lng"))); 13. var marker = createMarker(point, name, label, desc, address, type, icona); 14. map.addOverlay(marker); 15. } 16. }); 17.} 18.} 19. 20.function createMarker(point, name, label, desc, address, type, icona) { 21. var marker = new LabeledMarker(point, {icon: customIcons[type], labelText: label, labelOffset: new GSize(-6, -8)}) 22.};要分組標記，你需要下面的代碼：
1. markerGroups[type].push(marker); 2. var html = "<img src=" + icona + " height=150 border=0 /><br><br><span><b>"+ name + "</b><br/>" + 3. desc + "<br/><b>Address:</b> " + address + "<br/><br/><span>"; 4. GEvent.addListener(marker, 'click', function() { 5. marker.openInfoWindowHtml(html); 6. }); 7. return marker; 8.}要使用不同的圖標，你可以使用相同的方法。
01.var iconRed = new GIcon(); 02.iconRed.image = '../img/marker-red.png'; 03.iconRed.shadow = ''; 04.iconRed.iconSize = new GSize(32, 32); 05.iconRed.shadowSize = new GSize(22, 20); 06.iconRed.iconAnchor = new GPoint(16, 16); 07.iconRed.infoWindowAnchor = new GPoint(5, 1); 08. 09.var iconGreen = new GIcon(); 10.iconGreen.image = '../img/marker-green.png'; 11.iconGreen.shadow = ''; 12.iconGreen.iconSize = new GSize(32, 32); 13.iconGreen.shadowSize = new GSize(22, 20); 14.iconGreen.iconAnchor = new GPoint(16, 16); 15.iconGreen.infoWindowAnchor = new GPoint(5, 1); 16. 17.var iconBrown = new GIcon(); 18.iconBrown.image = '../img/marker-brown.png'; 19.iconBrown.shadow = ''; 20.iconBrown.iconSize = new GSize(32, 32); 21.iconBrown.shadowSize = new GSize(22, 20); 22.iconBrown.iconAnchor = new GPoint(16, 16); 23.iconBrown.infoWindowAnchor = new GPoint(5, 1); 24. 25.var customIcons = []; 26. 27.customIcons["hotel"] = iconRed; 28.customIcons["bridge"] = iconGreen; 29.customIcons["hill"] = iconBrown; 30.var markerGroups = { "hotel": [], "bridge": [], "hill": []};所以，如果我們在XML 文件中設置了不同的種類，如：hotel，bridge 和 hill，我們也應該需要不同的顏色和圖標。
過濾顯示標記
我們還可以讓我們的標記更友好一些。我們可以讓用戶決定是否顯示標記，這樣的話，地圖上的標記就不會太多，也會根據用戶的需求來顯示相當的標記。我們可以使用幾個按鈕，複選框，或是鏈接來完成這個事情。要做到這個事，你需要在“map.addMapType(G_SATELLITE_3D_MAP); ”後面加入下面的代碼：
1.document.getElementById("hotelCheckbox").checked = true; 2.document.getElementById("bridgeCheckbox").checked = true; 3.document.getElementById("hillCheckbox").checked = true; 4.document.getElementById("labelsCheckbox").checked = true;然後再加入下面的這些 JavaScript 的代碼：
01.function toggleGroup(type) { 02. for (var i = 0; i < markerGroups[type].length; i++) { 03. var marker = markerGroups[type][i]; 04. if (marker.isHidden()) { 05. marker.show(); 06. } else { 07. marker.hide(); 08. } 09. } 10.} 11. 12.function toggleLabels() { 13. var showLabels = document.getElementById("labelsCheckbox").checked; 14. for (groupName in markerGroups) { 15. for (var i = 0; i < markerGroups[groupName].length; i++) { 16. var marker = markerGroups[groupName][i]; 17. marker.setLabelVisibility(showLabels); 18. } 19. } 20.} 21. 22.function hideAll() { 23. var boxes = document.getElementsByName("mark"); 24. for(var i = 0; i < boxes.length; i++) { 25. if(boxes[i].checked) { 26. boxes[i].checked = false; 27. switchLayer(false, layers[i].obj); 28. chosen.push(i); 29. } 30. } 31.} 32. 33.function checkChecked() { 34. var boxes = document.getElementsByName("mark"); 35. for(var i = 0; i < boxes.length; i++) { 36. if(boxes[i].checked) return true; 37. } 38. return false; 39.}最後一件事是加如幾個checkbox ：
1.<input type="hidden" id="labelsCheckbox" onclick="toggleLabels()" checked=”checked” /> 2.<label for=”hotelCheckbox”>Hotels</label><input type="checkbox" id="hotelCheckbox" onclick="toggleGroup('hotel')" checked=”checked” /> 3.<label for=”bridgeCheckbox”>Bridges</label><input type="checkbox" id="bridgeCheckbox" onclick="toggleGroup('bridge')" checked=”checked” />我們 Google Maps 就緒了，這篇文章講述了Google Map API中你應該知道的。希望這篇文章對你有幫助。
文章：來源
