自定义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对象所用的样式。