雙圖面連動操作
API使用範例：於同一網頁建立兩個地圖圖面並提供同步操作功能
情境假設：
於單一網頁上建立兩個地圖圖框，分別顯示TGOS底圖以及衛星影像。同時透過地圖事件的監聽方法來同步兩個圖面的瀏覽動作。
TGOS MAP API建置方式：
1. 建立地圖：
1.1 建立第一個地圖：
首先宣告第一張地圖，取得網頁上的<div>容器（id為TGOSMap）之後加入TGOS地圖。並透過TGMapOptions進行圖面的客製化，關閉地圖類型、縮放及比例尺控制項。
var pOMap =document.getElementById("TGOSMap");
var mapOptions1 = {
mapTypeControl: false, //mapTypeControl(關閉地圖類型控制項)
navigationControl: false, //navigationControl(關閉縮放控制列)
scaleControl: false //scaleControl(關閉比例尺控制項)
};
pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826, mapOptions1);
1.2 建立第二個地圖：
重複步驟1.1，唯一不同之處為加入地圖之後，透過TGOnlineMap( )的「setMapTypeId」方法將地圖類型設定為衛星影像（F2IMAGE）。
var pSatMap =document.getElementById("Satellite"); //宣告第二張地圖, 放入容器'Satellite'內
var mapOptions2 = {
mapTypeControl: false, //mapTypeControl(關閉地圖類型控制項)
navigationControl: false, //navigationControl(關閉縮放控制列)
scaleControl: false //scaleControl(關閉比例尺控制項)
};
satMap = newTGOS.TGOnlineMap(pSatMap, TGOS.TGCoordSys.EPSG3826, mapOptions2);
satMap.setMapTypeId('F2IMAGE'); //第二張地圖設定為衛星影像
2. 地圖連動功能實做：
2.1 加入地圖滑鼠經過mouseover事件監聽器（地圖一）：
此監聽器建立的目的在於偵測滑鼠位置，當滑鼠位於第一張地圖的圖面上時，才會觸發下一步的動作。在這邊使用 TGEvent.addListener（）加入監聽器，事件設定在第一張地圖上（pMap），事件設為“mouseover”。
TGOS.TGEvent.addListener(pMap,"mouseover", function(){
2.2 加入地圖邊界改變事件監聽器（地圖一）
此監聽器建立在上一個監聽器之下，即當滑鼠位於地圖一上面時才會進行新的事件監聽。目的在於偵測地圖一的邊界改變事件（如地圖平移、縮放等動作都會造成地圖邊界改變），在這邊使用TGEvent.addListener( )加入監聽器，事件設定在第一張地圖上（pMap），事件設為“bounds_changed”。
listener1 = TGOS.TGEvent.addListener(pMap,"bounds_changed", function(){
2.3 將地圖一的操作動作同步至地圖二
承上一步驟，當我們偵測到地圖一的地圖邊界改變時，可以先透過TGOnlineMap的「getBounds（）」方法來取得改變後的地圖邊界值，之後再透過「fitBounds（）」方法將新的地圖邊界值套至地圖二，達到兩張地圖同步的目的。
var MapBound = pMap.getBounds();
satMap.fitBounds(MapBound);
在此先做個整理，將步驟2.1～2.3的動作整合在一起，便能組成透過操作地圖一來同步地圖二的程式碼。程式碼如下所示---
TGOS.TGEvent.addListener(pMap,"mouseover", function(){
listener1 =TGOS.TGEvent.addListener(pMap, "bounds_changed",function(){
var MapBound =pMap.getBounds(); //取得改變後的地圖邊界
satMap.fitBounds(MapBound); //設定第二張地圖的邊界
});
});
2.4 將地圖二的操作步驟連動至地圖一：
透過步驟2.1～2.3，我們可以將使用者在地圖一的操作連動至地圖二，現在則是要建立一段反向的程式碼，將地圖二的操作步驟連動至地圖一，進而達成使用者無論在哪一張地圖操作都可以同步兩個圖面的目標。
這個階段我們只需要參考前面步驟的設計原則，很快的就能將地圖二連動地圖一的程式完成。
TGOS.TGEvent.addListener(satMap,"mouseover", function(){
listener2 =TGOS.TGEvent.addListener(satMap, "bounds_changed",function(){
var MapBound =satMap.getBounds(); //取得改變後的地圖邊界
pMap.fitBounds(MapBound); //設定第二張地圖的邊界
});
});
2.5 移除地圖邊界改變監聽器（地圖一 & 地圖二）：
上述的設計方式是利用監聽地圖邊界改變的事件，來改變另一張地圖的邊界，這樣的作法會產生兩張地圖不斷地反覆偵測邊界改變及設定另一張地圖邊界的動作，最後造成程式的崩潰，因此我們在這邊必須加入一些限制，來停止監聽邊界改變的事件。作法就是透過監聽滑鼠移出圖面的事件來觸發移除地圖邊界改變的監聽器，滑鼠移出圖面的事件為“mouseout”，兩張地圖都需要加入這個設定。
TGOS.TGEvent.addListener(pMap,"mouseout", function(){
TGOS.TGEvent.removeListener(listener1);
});
TGOS.TGEvent.addListener(satMap,"mouseout", function(){
TGOS.TGEvent.removeListener(listener2);
});
