Google Maps API - 資訊視窗 ( Infowindow )

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

資訊視窗起手式

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

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

資訊視窗設定 InfoWindow Options

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

舉例來說,下面這段程式碼執行後,會看到一個最大寬度為 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()的方法,其實資訊視窗還包含了以下其他的方法:

舉例來說,下面這段程式碼執行後,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監聽以下幾種事件:

小結

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

有興趣瞧瞧其他新文章嗎?