自定义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写的真够复杂的,不过注释写的也够明白,真是太佩服这个人了,感觉自己和别人相比真是小菜中的小菜呀,需要继续努力!

  换上新的样式后果然不错,效果如下:

自定义google maps 的infowindow_第1张图片

 

引用这个extendinfowindow也是相当的方便,

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

 

注意第二个参数是infowindow对象所用的样式。

你可能感兴趣的:(SVN,css,Google,Firebug)