自定義google maps 的infowindow

   英文版世博訂房網第二期要加上地圖搜尋，我和另外一個同僚完成了有關地圖搜尋、酒店位置在地圖展示等功能後，老總覺得google map預設的消息展示視窗infowindow太難看了，給了一個他認為比較好看的，類似ruba網站上的infowindow，當時上ruba網上，用firebug檢視了它的js，css，挺複雜的，越看越覺得無從下手了。看google map api reference，裡面對于Ginfowindow的描述很簡單：

GInfoWindow

has no constructor. It is created by the map and accessed by its method

GMap2.getInfoWindow()

.

然後試着按照api上所寫的擴充操作，發現這是一個很巨大的工程，還是找找有沒有現成的demo之類。

到google裡搜尋，試了N多關鍵詞，結果搜尋出來的東東除了google maps api沒有别的（先用中文搜尋的

），失望之餘改用英文搜，一下子出現N多連結，貌似都還挺有幫助的，看來還是老外研究這個比較多呀，很興奮地點開，竟然“該網頁無法顯示”，

 遇到N多這樣的網頁，不過還是極少的網頁是可以看的，終于找到了一個文章，這個文章講到了一種infowindow的自定義擴充，http://drupal.org/node/247875

感覺這個人研究的挺深入，還比較好幾種自定義方案的優劣點，他提到有三種，There are several plugins / extensions that customise the appearance infowindow (bubble) in a bit nicer way than what is possible with css, like extinfowindow, Elabel and Ebubble, of which the first one looks best to me.

很遺憾的是後面兩種根本打不開連結，不過，很幸運的是第一個竟然還可以打開，并且正是我要找的custom infowindow，很是高興。還是把這個連結也分享出來吧，如果它還能打開的話，對有這需求的朋友也是很有幫助的，http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/cssSkins.html

将extinfowindow.js 從這個網頁中down下來後看看，發現這js寫的真夠複雜的，不過注釋寫的也夠明白，真是太佩服這個人了，感覺自己和别人相比真是小菜中的小菜呀，需要繼續努力！

  換上新的樣式後果然不錯，效果如下：

引用這個extendinfowindow也是相當的友善，

GEvent.addListener(marker3, 'click', function(){ 
         
            marker3.openExtInfoWindow(
              map, 
              "custom_info_window_red",
              htmldesc,
              {beakOffset: 3}
            ); 
          });
              

注意第二個參數是infowindow對象所用的樣式。