英文版世博订房网第二期要加上地图搜索,我和另外一个同事完成了有关地图搜索、酒店位置在地图展示等功能后,老总觉得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对象所用的样式。
分享到:
相关推荐
**标题:“具有自定义InfoWindow的MVC 4中的Google Maps”** 在本文中,我们将深入探讨如何在Microsoft ASP.NET MVC 4框架中集成Google Maps,并实现自定义的InfoWindow功能。Google Maps API是一个强大的工具,它...
InfoWindow在Google Maps API中是一个非常实用的功能,它可以在地图上的标记(Marker)上显示详细信息。通常,InfoWindow包含文本、图像或者HTML内容,当用户点击或鼠标悬停在Marker上时弹出。然而,API默认的...
var infowindow = new google.maps.InfoWindow({ content: 'Some Content' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` 当用户点击标记时,会弹出包含'Some ...
《图书Google Maps API开发大全》是一本深入探讨Google Maps API技术的专业书籍,旨在帮助开发者全面理解和熟练运用这一强大的地图服务接口。源码文件名为"code",包含了书中各个章节的示例代码,使得读者能够通过...
这需要利用Google Maps JavaScript API的Marker和InfoWindow对象,以及事件监听器来响应用户的交互。 查询地标功能则涉及到搜索和过滤技术。用户可以通过输入关键字来查找特定的地标或商家。这个功能可能需要用到...
《Google Maps API开发大全》是针对开发者们深入学习和应用Google Maps API的重要参考资料。Google Maps API是Google提供的一项强大服务,允许开发者将地图功能集成到自己的网站或应用程序中,实现地图展示、定位、...
var infowindow = new google.maps.InfoWindow({ content: 'Hello, World!' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` **7. 覆盖物(Overlays)** 除了上述的基本...
这个库主要解决了Google Maps原生InfoWindow(信息窗口)功能的一些限制,提供了更为强大的自定义和扩展能力。 `google-maps-infobox`库的主要特点和优势如下: 1. **自定义样式与内容**:原生的InfoWindow在显示...
12. **自定义标记和InfoWindow**:Google Maps API允许你创建自定义的标记图标和InfoWindow(信息窗口),这样可以根据应用的需求个性化显示地点信息。 13. **实时交通和路况**:通过开启实时交通层,可以在地图上...
1. **Google Maps API简介**:Google Maps API是Google提供的一组JavaScript接口,让开发者可以自定义地图显示、添加标记、绘制路径、实现地理编码和反地理编码等功能。它基于Web服务,允许开发者通过HTTP请求获取...
它是一个JavaScript库,允许开发人员通过JavaScript代码与Google Maps平台进行交互,创建自定义的地图体验。API提供了一系列接口和方法,用于加载地图、添加标记、绘制路径、实现地理编码(地址转经纬度)和反地理...
Marker是Google Maps API中的一个关键组件,用于在地图上放置一个可自定义的点状图标,代表特定的地理位置。开发者可以使用默认的Marker图标,也可以自定义图标,以满足不同应用需求。例如,自定义图标可以用来区分...
本Demo涵盖了Google Maps Android API v2的主要功能,包括地图显示、定位、标记、路径绘制、信息窗口以及自定义交互。开发者可以根据自己的需求,从这个全面的示例中学习并应用到实际项目中,以创建出功能丰富的地图...
React-Google-Maps还支持自定义事件处理、交互式地图元素、地理编码、路线规划等功能。例如,可以监听Marker的点击事件,或者使用DirectionsRenderer组件来显示两点之间的路线。 五、最佳实践 1. 将...
在本项目"flutter_challenge_googlemaps.zip"中,我们聚焦于使用Flutter框架来构建一个跨平台的应用,该应用实现了Uplabs上的Google Maps UI挑战。这个挑战旨在展示如何利用Flutter的灵活性和强大功能来重现Google ...
12. **UI自定义**:Google Maps API允许开发者自定义地图的样式,包括颜色、图标等,以适应应用的设计风格。 13. **测试与调试**:在开发过程中,需要在多种设备和Android版本上进行测试,确保应用兼容性和性能。...
var infowindow = new google.maps.InfoWindow({ content: 'Hello World!' }); marker.addListener('click', function() { infowindow.open(map, marker); }); ``` - 路径规划: ```javascript var ...
- 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 |...