Johnny實驗室

這次來實作google map上的資訊框

點擊圖示會跳出一個小視窗在圖示上方

var infowindow = new google.maps.InfoWindow()

宣告的時候注意，一個MAP只需new一次，這樣可以達到你打開第一個資訊框，去點擊第二個時，第一個會自動關閉。

也就是map上只會存在一個資訊框。

假如你new多個，這樣使用者都必須手動點擊X(叉叉)才能關閉。

接下來是google map提供的事件

google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent("HI");
            infowindow.open(map, this);
        });

這個事件你必須先提供你要擺資訊框的Marker，再來寫入事件狀態

事件狀態可以參考這裡:https://developers.google.com/maps/documentation/javascript/events?hl=zh-tw

infowindow.setContext("寫入你要顯示的字串")

並放到map上

下面是結果~

希望有幫助到大家