使用Google Maps JavaScript API加入TGOS主題地圖

API使用範例：於Google Maps圖台套疊TGOS主題地圖

情境假設：

此範例示範如何在Google Maps JavaScript API的開發環境下，介接TGOS提供的主題地圖服務作為搭配的圖層使用。使用者僅需呼叫TGOS提供Google Maps API專用JavaScript程式碼，即可再少量的網頁客製化之後，輕鬆地在Google Maps圖台套疊TGOS主題地圖。使用者如果需要更多的地圖功能，則需依照Google Maps API所提供的內容再進行加值開發。

TGOS MAP主題地圖代理程式建置方式：

1.     引用外部JavaScript

範例中我們引用兩個JavaScript檔案來配合使用，第一個是Google Maps JavaScript API，另一個則是TGOS提供的JavaScript檔，其內部已經針對在Google Maps API的環境下客製化引用TGOS電子地圖的部份進行設定。引用方式如下：

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
    </script>            <!--使用Google Map API建立圖台-->

          <script src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/TGThemeLayer_Google/TGThemeLayer_GoogleMaps.js"></script>
                                        <!--引用TGThemeLayer_ GoogleMaps.js -->

2.     建立圖台的地圖物件

在輸出新的主題地圖之前，須先建立一個可放置主題地圖的圖台，其中包含加入需要之底圖圖層與設定初始顯示中心，程式碼如下：

        function initialize() {                                                                           // 建立圖台的地圖物件

         var myLatLng = new google.maps.LatLng(25.036, 121.551); 

         var mapOptions = {                                                                           //地圖設定

             zoom: 17,                                                                                         //設定初始縮放比例

             center: myLatLng,                                                                          //初始顯示中心

             mapTypeId: google.maps.MapTypeId.ROADMAP

         };

         map = new google.maps.Map(

             document.getElementById('TGMap'),

             mapOptions);

3.    使用TGOS金鑰取得主題地圖權限

與其它TGOS MAP API相同，TGOS主題地圖服務需要通過權限驗證方能使用。因此產生TGThemeAgent物件時，需要在其TGKey屬性設定TGOS金鑰(AppID與APIKey)，方能呼叫權限允許之主題地圖圖資。

4.    建立TGOS 主題地圖

最後一個步驟為加入想要呈現之主題地圖服務，因Google Maps之坐標系統在程式中綁定為EPSG3857(Web麥卡托坐標系統)，故不用另外設定坐標系統，在建立主題地圖中僅需設定想呈現之服務名稱與圖層代碼，程式碼如下：

agentLayer = new TGOS.TGThemeAgent(                 // 建立主題地圖圖層

          new TGOS.TGKey(appID, apiKey),                          // 申請的 appID 和 apiKey

輸入其相對應之服務名稱與圖層代碼，對照表請參照圖資欄位表，須注意的是在輸入服務圖層代碼時，圖層代碼前須重複輸入服務代碼，若圖層代碼第一碼非英文的話，則其服務圖層代碼有特殊寫法如下：

        TGOS.TGMapServiceId.SCHOOL,                             // 服務名稱代碼

new Array(TGOS.TGMapId.SCHOOL.SCHOOL_B, TGOS.TGMapId.SCHOOL.SCHOOL_C,
         TGOS.TGMapId.SCHOOL.SCHOOL_D, TGOS.TGMapId.SCHOOL.SCHOOL_E,
         TGOS.TGMapId.SCHOOL.SCHOOL_F),
          // 服務圖層代碼列表(可為一項或多項)

TGOS.TGMapId.FLOOD_P['1DR450']
// 當圖層代碼第一碼非英文之寫法，FLOOD_P為服務名稱代碼，1DR450為服務圖層代碼

opts);                                                                                // 其他的地圖設定