`
远去的渡口
  • 浏览: 474473 次
  • 性别: Icon_minigender_2
  • 来自: 上海转北京
社区版块
存档分类
最新评论

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

3
1
分享到:
评论
2 楼 今天晴 2012-03-10  
楼主,我想问一下,怎么才能把google map本身自带的InfoWindow禁用掉?
1 楼 yushiro 2010-07-21  
非常有帮助,谢谢了。
之前也找过一些自定义InfoWindow的资料, 不过没啥结果。
你贴出的方案给我启发,可以解决我遇到的问题(就是把InfoWindow的Close按钮隐藏掉),
既然可以更换CSS, 那就在特定的地方, 用特定的CSS,把Close的X给display:none掉~

相关推荐

    具有自定义InfoWindow的MVC 4中的Google Maps

    **标题:“具有自定义InfoWindow的MVC 4中的Google Maps”** 在本文中,我们将深入探讨如何在Microsoft ASP.NET MVC 4框架中集成Google Maps,并实现自定义的InfoWindow功能。Google Maps API是一个强大的工具,它...

    GMapV3infowindow风格可扩展源码

    InfoWindow在Google Maps API中是一个非常实用的功能,它可以在地图上的标记(Marker)上显示详细信息。通常,InfoWindow包含文本、图像或者HTML内容,当用户点击或鼠标悬停在Marker上时弹出。然而,API默认的...

    Google Api之Google maps代码

    var infowindow = new google.maps.InfoWindow({ content: 'Some Content' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` 当用户点击标记时,会弹出包含'Some ...

    图书Google Maps API开发大全的各章源码

    《图书Google Maps API开发大全》是一本深入探讨Google Maps API技术的专业书籍,旨在帮助开发者全面理解和熟练运用这一强大的地图服务接口。源码文件名为"code",包含了书中各个章节的示例代码,使得读者能够通过...

    Google Maps 二次开发实例

    这需要利用Google Maps JavaScript API的Marker和InfoWindow对象,以及事件监听器来响应用户的交互。 查询地标功能则涉及到搜索和过滤技术。用户可以通过输入关键字来查找特定的地标或商家。这个功能可能需要用到...

    Google Maps API开发大全

    《Google Maps API开发大全》是针对开发者们深入学习和应用Google Maps API的重要参考资料。Google Maps API是Google提供的一项强大服务,允许开发者将地图功能集成到自己的网站或应用程序中,实现地图展示、定位、...

    [免费]Google Maps JavaScript API V3中文版参考手册.rar

    var infowindow = new google.maps.InfoWindow({ content: 'Hello, World!' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` **7. 覆盖物(Overlays)** 除了上述的基本...

    前端开源库-google-maps-infobox

    这个库主要解决了Google Maps原生InfoWindow(信息窗口)功能的一些限制,提供了更为强大的自定义和扩展能力。 `google-maps-infobox`库的主要特点和优势如下: 1. **自定义样式与内容**:原生的InfoWindow在显示...

    Android Google Maps Project

    12. **自定义标记和InfoWindow**:Google Maps API允许你创建自定义的标记图标和InfoWindow(信息窗口),这样可以根据应用的需求个性化显示地点信息。 13. **实时交通和路况**:通过开启实时交通层,可以在地图上...

    Google Maps API开发大全code

    1. **Google Maps API简介**:Google Maps API是Google提供的一组JavaScript接口,让开发者可以自定义地图显示、添加标记、绘制路径、实现地理编码和反地理编码等功能。它基于Web服务,允许开发者通过HTTP请求获取...

    Google+Maps+API编程资源大全

    它是一个JavaScript库,允许开发人员通过JavaScript代码与Google Maps平台进行交互,创建自定义的地图体验。API提供了一系列接口和方法,用于加载地图、添加标记、绘制路径、实现地理编码(地址转经纬度)和反地理...

    GoogleMaps图标包

    Marker是Google Maps API中的一个关键组件,用于在地图上放置一个可自定义的点状图标,代表特定的地理位置。开发者可以使用默认的Marker图标,也可以自定义图标,以满足不同应用需求。例如,自定义图标可以用来区分...

    Google Maps Android API v2新API全部使用方法的Demo

    本Demo涵盖了Google Maps Android API v2的主要功能,包括地图显示、定位、标记、路径绘制、信息窗口以及自定义交互。开发者可以根据自己的需求,从这个全面的示例中学习并应用到实际项目中,以创建出功能丰富的地图...

    前端开源库-react-google-maps

    React-Google-Maps还支持自定义事件处理、交互式地图元素、地理编码、路线规划等功能。例如,可以监听Marker的点击事件,或者使用DirectionsRenderer组件来显示两点之间的路线。 五、最佳实践 1. 将...

    flutter_challenge_googlemaps.zip

    在本项目"flutter_challenge_googlemaps.zip"中,我们聚焦于使用Flutter框架来构建一个跨平台的应用,该应用实现了Uplabs上的Google Maps UI挑战。这个挑战旨在展示如何利用Flutter的灵活性和强大功能来重现Google ...

    android应用平台的google maps应用

    12. **UI自定义**:Google Maps API允许开发者自定义地图的样式,包括颜色、图标等,以适应应用的设计风格。 13. **测试与调试**:在开发过程中,需要在多种设备和Android版本上进行测试,确保应用兼容性和性能。...

    Google Maps API开发大全 源码

    var infowindow = new google.maps.InfoWindow({ content: 'Hello World!' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` - 路径规划: ```javascript var ...

    google-maps-es6

    - GMap |- GoogleMapsApi.js - google maps api class |- marker.tmpl.js - custom marker template |- stylers.js - JSON styles and custom icon |- index.js - functions to render map, marker and infowindow |...

Global site tag (gtag.js) - Google Analytics