本来也没想到要学习下google map，由于项目需要，所以简单学习了下google map。
首先要加载google maps api，不然一切无从谈起，
<script type="text/javascript" src="http://maps/api/js?sensor=false"></script>
必须要设置 sensor 参数，以指明此应用程序是否使用传感器确定用户的位置。
然后编写地图函数，在进行加载。
simple map：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(30.33,120.23);
var myOption = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), myOption);
}
</script>
</head>
<body onload="initialize()">
<div id="myMap" style="width:600px;height:400px"></div>
</body>
</html>
也可以通过js事件加载：google.maps.event.addDomListener(window, 'load', initialize);
latlng对象是经纬度，mapTypeId有多种，具体google的挨批中有，一般主要使用ROADMAP。map就是地图对象，zoom参数指定显示地图的详细程度。
还可以为地图添加标记，信息窗口，事件等。
simple marker map：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(30.3, 120.2);
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var markerOption = {
position:latlng,
map:map,
title:"good"
}
var marker = new google.maps.Marker(markerOption);
google.maps.event.addListener(marker, 'click', function() {
if(map.getZoom() == 15) {
map.setZoom(10);
}else {
map.setZoom(15);
}
});
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng, map);
});
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position:position,
map:map
});
map.panTo(position);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
此代码可以在地图上任意添加marker。
simple window info map：
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(30.33,120.23);
var myOption = {
zoom:8,
center:latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), myOption);
marker = new google.maps.Marker({
position:latlng,
map:map
});
var content = "good";
infowindow = new google.maps.InfoWindow({
content:content,
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function hide() {
var cmd = document.getElementById("show").value;
if(cmd == "hide") {
infowindow.close();
document.getElementById("show").value = "show";
}else {
infowindow.open(map, marker);
document.getElementById("show").value = "hide";
}
}
</script>
</head>
<body onload="initialize()">
<div id="myMap" style="width:600px;height:400px"></div>
<div><input type="button" onclick="hide()" value="show" id="show"/></div>
</body>
</html>
此代码点击按钮可以显示marker上边的info window，也可以隐藏。
标记也可以通过自定义。
其实对于google map的学习，google maps api中已经提供相当的例子，可以通过解读源代码来学习。
[url]http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/[/url]
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)