Google Maps API - 資訊視窗 ( Infowindow )

資訊視窗 ( InfoWindow ) 是常見於地圖的元素，通常在我們點選某個地點或地圖標記時，就會彈出資訊視窗，上面會標著一些關於這個地點的內容，這篇就來試試看用 Google Maps API 在地圖上加入資訊視窗。

資訊視窗起手式

資訊視窗也是 Google 地圖疊加層的一種 ( Google 地圖上所有東西都是疊加層 )，所以要加入資訊視窗，可以透過下列的語法加入，InfoWindowOptions 的部分是資訊視窗的內容與屬性設定。

var infowindow = new google.maps.InfoWindow(InfoWindowOptions)

資訊視窗設定 InfoWindow Options

從起手式可以看到 InfoWindowOptions，這是資訊視窗的設定，這些設定有以下幾種：

• content：資訊視窗的內容，可以是一段 html 或一段文字，內容會自動調整大小，最大不會超過資訊視窗大小，如果需要比較大的資訊視窗顯示，可以改變資訊視窗的 maxWidth 屬性。
• disableAutoPan：禁止資訊視窗出現時平移地圖，預設值為 true，也就是如果資訊視窗出現後，會在瀏覽器視窗外，則會自動將地圖平移到可以看到資訊視窗的位置，如果設為 false 就不會自動平移。
• maxWidth：資訊視窗最大寬度，輸入數字即可不用加單位，固定單位為 px，。
• pixelOffset：資訊視窗相對於其預設出現位置的位移，使用new google.maps.Size(x, y)來設定，除非有特殊需求不然就不設定，採用預設值。
• position：資訊視窗的位置，使用經緯度表示，如果不指定，預設會在地圖左上方出現，若將資訊視窗附加到地圖標記上，位置則會依據標記位置來決定。
• zIndex：資訊視窗的階層，數字越大在越上面。

舉例來說，下面這段程式碼執行後，會看到一個最大寬度為 200px，以 marker 為主往右偏移 100px 往上偏移 20px，內容寫著「大家好我是資訊視窗」的資訊視窗。

範例：資訊視窗設定

var map;
var position = {
  lat: 25.0336962,
  lng: 121.5643673
};
var contentString = '<h1>大家好我是資訊視窗</h1>';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });
  var marker = new google.maps.Marker({
    map: map,
    position: position
  });
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: position,
    maxWidth:200,
    pixelOffset: new google.maps.Size(100, -20) 
  });
  infowindow.open(map,marker);

}

資訊視窗方法 InfoWindow Methods

在上面的範例中，看到了一個open()的方法，其實資訊視窗還包含了以下其他的方法：

• open(map)：開啟資訊視窗，內容包含一個必填參數「map」和一個選填參數「位置」，map 比較容易理解基本上就是這張地圖，位置的話可以指定放在哪個地圖標記 marker，或是直接由經緯度指定位置。
• close()：關閉資訊視窗
• getContent()：獲得資訊視窗的內容。
• getPosition()：獲得資訊視窗的位置。
• setContent()：設定資訊視窗的內容。
• setPosition()：設定資訊視窗的位置。
• setZIndex()：設定資訊視窗的階層。
• setOptions()：所有資訊視窗的設定，都可用物件的方法來設定。

舉例來說，下面這段程式碼執行後，marker 上有個資訊視窗，裡頭有個按鈕寫著「點我」，如果你去點這個按鈕，資訊視窗的內容就會發生變化，此外如果你點選 x 關閉資訊視窗，亦可再點擊 marker 把資訊視窗打開。

範例：資訊視窗方法

var map;
var position = {
  lat: 25.0336962,
  lng: 121.5643673
};
var a = 1;
var contentString = '<h1>大家好我是資訊視窗</h1><button id="btn">點我</button>';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: position
  });
  var marker = new google.maps.Marker({
    map: map,
    position: position
  });
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
    position: position
  });
  infowindow.open(map, marker);
  infowindow.addListener('domready',function() {
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function() {
      a = a * -1;
      if (a > 0) {
        infowindow.setContent('<h1>嘿嘿</h1><button id="btn">點我</button>');
      } else {
        infowindow.setContent('<h1>哈哈</h1><button id="btn">點我</button>');
      }
    });
  });
  marker.addListener('click',function(){
    infowindow.open(map, marker);
  });
}

資訊視窗事件 InfoWindow Events

除了設定和方法，在上面的範例中，資訊視窗也可以透過addListener監聽以下幾種事件：

• closeclick：當資訊視窗關閉時 ( 通常是點選 x 關閉 )。
• content_changed：當資訊視窗的內容發生改變 ( 可透過setContent改變 )。
• domready：當資訊視窗的 HTML DOM 準備好的時候。
• position_changed：當資訊視窗的位置發生改變 ( 可透過setPosition改變 )。
• zindex_changed：當資訊視窗的階層發生改變 ( 可透過setZIndex改變 )。

小結

資訊視窗就像是在地圖上多了一個圖層，裡面塞入 html 的內容，不過基本上在 Google 地圖裡，疊上去的東西都是疊加層，資訊視窗也不例外，當熟悉了資訊視窗的用法，就更能為自己的客製化地圖，加入更多豐富的資訊。