google 地图 api 谷歌map下添加消息窗口InfoWindow _Web前端

google map api 谷歌地图上添加消息窗口InfoWindow
使用的时候特别简单，也非常方便；这让我感觉到编程的未来应该更多的倾向于配置，让我们从更复杂的逻辑中解放出来更多的关注于业务！

1.代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Google 地图 JavaScript API 示例: 简单的地图</title>

<script type="text/javascript"
	src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>

<script type="text/javascript">
	function initialize() {
		var mylatlng = new google.maps.LatLng(30.633186, 104.055394);
		var mapOptions = {
			zoom : 16, //缩放级别    
			center : mylatlng,
			mapTypeId : google.maps.MapTypeId.ROADMAP, //ROADMAP-默认视图 SATELLITE-显示Google地球卫星图像 HYBRID-混合显示普通视图和卫星视图 TERRAIN-地形图 
			scaleControl : true, //比例尺  
			mapTypeControl : true,
			mapTypeControlOptions : {
				style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
			}
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
		var mark = new google.maps.Marker( {
			position : mylatlng,
			map : map,
			title : "宝贝QR码就在这里啦！"
		});
		var message = new google.maps.InfoWindow( {
			content : "<a href='http://www.baidu.com'><img title='宝贝' height='100px' width='100px'  src='http://www.52shehua.com/images/upload/Image/132.jpg'/></a>快来拿宝贝吧！",
			size : new google.maps.Size(100, 100)
		});
		google.maps.event.addListener(mark, 'mouseover', function() {
			message.open(map, mark);
		});
		google.maps.event.addListener(mark, 'mouseout', function() {
			message.close(map, mark);
		});
	}
</script>

</head>
<body onload="initialize()">

<div id="map_canvas" style="width: 600px; height: 400px"></div>

</body>
</html>

2.效果图

3.更多的参数配置：
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions

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

.