Google Map InfoBox样式修改

遇到一个修改google map默认弹窗样式的工作,同事给我的时候是把样式直接写在页面里面,但是之前做demo时,是写在外链css里面的,方便维护,也懒得改了,想也应该可以写在class吧。就查了一下文档,还给找到了。boxClass,这个属性。

function buildMarker(action){
	var link = buildDetailLink(action.id);
	var latLng = new google.maps.LatLng(action.lat, action.lon);
	var img = new google.maps.MarkerImage('/img/web_view/map_icon.png', new google.maps.Size(16, 38), null, null, new google.maps.Size(16, 38));
	var marker = new google.maps.Marker({
	    position: latLng,
	    map: map,
	    flat: true,
	    icon: img
	});
	google.maps.event.addListener(marker, 'click', function(){
		currentMarker = marker;
		closeInfoboxes();
		var content = '
'; content += '

'+action.name+'

'; content += ''+action.address+''; content += '人均: '+action.avgCost+''; content += '

查看详情'; content += ''; content += '取消选择

'; content += '
'; content += '
'; content += '
'; var myOptions = { content: content, maxWidth: 0, disableAutoPan: false, pixelOffset: new google.maps.Size(-140, 0), boxClass:"shop_location" ,closeBoxURL: "" ,infoBoxClearance: new google.maps.Size(1, 1) ,isHidden: false ,pane: "floatPane" ,enableEventPropagation: false }; var ib = new InfoBox(myOptions); ib.open(map, marker); infoboxes.push(ib); }); return marker; }

摘一个主要的函数供以后参考。
参考Infobox手册:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

GoogleBar 本地搜索控件

开发者更容易地在自己的地图中加入本地搜索控件,地图上面的”Powered By Google”的Logo被一个漂亮的新控件取代,这个新控件提供了一个搜索框,这样用户就可以搜索地图上的本地信息了。

简单的调用map对象的enableGooglebar()方法即可。

var map = new GMap2(document.getElementById(“map”));

map.enableGoogleBar();

测试了一下,发现使用挺方便,但是搜索结果页内嵌了广告及会链接到谷歌的站,流量可能消耗掉了,按需选用~~

google map 应用学习网站

Google 地图 API

主页 http://code.google.com/intl/zh-CN/apis/maps/

文档 http://code.google.com/intl/zh-CN/apis/maps/documentation/index.html

API  http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html 

Google Maps API中文同步文档

http://www.codechina.org/doc/google/gmapapi/

 Google Map学习(一) 简单的Google Map,Google Map基础

http://www.cnblogs.com/psunny/archive/2009/08/26/1554476.html

 Google 地图 API 示例 -地理学习小游戏

http://code.google.com/intl/zh-CN/apis/maps/documentation/demos/geogame/geogame.html