[[PageOutline]]

= Step by Step building Your Own Google Map Application =

== 申請 Gooogle Map API Key ==

 * http://code.google.com/apis/maps/signup.html
   * 勾選同意使用規範，輸入網址，點選『Generate API Key』
[[Image(GoogleMapKey.jpg)]]
 * 產生 API Key 完畢就會得到第一個 HTML 範例
[[Image(GoogleMapSample.jpg)]]
 * 把 HTML 範例貼到 goglemap.html 檔案放置在 www 目錄(Ex. /var/www)中，就可以看到[http://trac.nchc.org.tw/googlemap.html 第一個成果]囉 :)

== 解析網站原始碼 ==

 * http://deepsea.biodiv.tw/locamapd.asp
{{{
#!java
 function load() {
   PassValue();
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));  // 取得 DOM 中,名稱為 map 的元件
      map.addControl(new GLargeMapControl());               // 加入左上角比例尺規控制列
      map.addControl(new GMapTypeControl());                // 加入右上角"地圖","衛星","混合地圖"按鈕
      map.setCenter(new GLatLng(23.8,121), 7);              // 設定預設經緯度北緯 23.8, 東經 121, 預設比例尺 100 公里(7)
      map.setMapType(G_SATELLITE_MAP);                      // 設定預設底圖為"衛星"
}}}
  *  
{{{
      map.addControl(new GScaleControl());                  // 加入左下角比例尺狀態列
}}}
 * http://deepsea.biodiv.tw/getdeepstaxml.asp