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 οnlοad="initialize()">
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</body>
</html>
2.效果圖
[img]http://dl.iteye.com/upload/picture/pic/101026/82d15865-701c-348b-a461-dfc387febc47.png[/img]
3.更多的參數配置：
[url=http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/reference.html#InfoWindowOptions[/url]
[url=http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps]http://www.codechina.org/doc/google/gmapapi/#The_Hello_World_of_Google_Maps[/url]
.