您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

資訊視窗

  1. 簡介
  2. 新增資訊視窗
  3. 開啟資訊視窗
  4. 關閉資訊視窗
  5. 移動資訊視窗

簡介

InfoWindow 會在地圖上方的指定位置,於彈出式視窗中顯示內容(通常是文字或影像)。資訊視窗包含內容區域和錐形主體。主體的頂端連接到地圖上的指定位置。

通常您會將資訊視窗附加到標記,但是您也可以將資訊視窗附加到特定緯度/經度,如下列關於新增資訊視窗一節中所述。

廣泛來說,資訊視窗是一種疊加層。如需其他疊加層類型的詳細資訊,請參閱在地圖上進行繪製

新增資訊視窗

InfoWindow 建構函式可接受 InfoWindowOptions 物件常值,此物件常值能指定顯示資訊視窗的初始參數。

InfoWindowOptions 物件常值包含下列欄位:

  • content 包含在資訊視窗中顯示的文字字串或 DOM 節點。
  • pixelOffset 包含從資訊視窗頂端到其錨定位置的位移。不過實際執行時,您應該不需要指定這個欄位。您可以保留它的預設值。
  • position 包含此資訊視窗錨定的 LatLng。注意:InfoWindow 可以附加到 Marker 物件(在這個情況中,它的位置是依據標記的位置來決定)或直接附加到地圖上的指定 LatLng 位置。擷取 LatLng 的一種方法是使用地理編碼服務。在標記上開啟資訊視窗會自動更新 position
  • maxWidth 指定資訊視窗的最大寬度(以像素為單位)。根據預設,資訊視窗會延伸以適應它的內容。如果資訊視窗填滿地圖,則會自動換行文字。如果新增 maxWidth,則資訊視窗會自動換行文字,以強制執行指定的寬度。如果它達到最大寬度且畫面上還有垂直的空間,則資訊視窗可能會垂直延伸。

InfoWindow 的內容可能包含文字字串、HTML 片段或 DOM 元素。如果要設定內容,可在 InfoWindowOptions 內指定它,或在 InfoWindow 上明確呼叫 setContent()

如果要明確調整內容的大小,可以將內容放在 <div> 元素內,並使用 CSS 設定 <div> 的樣式。您也可以使用 CSS 啟用捲動功能。請注意,如果您沒有啟用捲動功能而內容超過資訊視窗中可用的空間時,則內容可能會溢出資訊視窗外。

開啟資訊視窗

在您建立資訊視窗時,它不會自動顯示在地圖上。如果要讓資訊視窗可以顯示,您需要在 InfoWindow 上呼叫 open() 方法,並將要開啟資訊視窗的 Map 傳遞給該方法,以及傳遞要錨定資訊視窗的 Marker (選擇性)。如果沒有提供標記,資訊視窗便會在它的 position 屬性所指定的位置開啟。

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

檢視範例 (infowindow-simple.html)

下列範例會設定資訊視窗的 maxWidth檢視範例 (infowindow-simple-max.html)

關閉資訊視窗

根據預設,InfoWindow 會保持開啟狀態,直到使用者按一下關閉控制項(即資訊視窗右上方的 x 符號)。如果您想要的話,可以呼叫資訊視窗的 close() 方法來明確關閉它。

移動資訊視窗

有兩種方式可以變更資訊視窗的位置:

  • 在資訊視窗上呼叫 setPosition(),或
  • 使用 InfoWindow.open() 方法將資訊視窗附加到新的標記。注意:如果呼叫 open() 但沒有傳遞標記,則 InfoWindow 會使用建構時透過 InfoWindowOptions 物件常值所指定的位置。

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁