如何使用Google Map API
最近研究了一下GoogleMap的使用方法，发现有两种常见的用法，总结一下，以后查起来方便！
一、调用Google团队封装好的地址，简单方便
有一种方法比较简单，进去google的地图页面http://ditu.google.cn/，然后输入目的地址，然后右面有一个分享的链接，点击获取HTML代码，你会得到譬如
<iframewidth="425"height="350"frameborder="0"scrolling="no"marginheight="0"marginwidth="0"src="http://ditu.google.cn/?ie=UTF8&hq=&hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&ll=31.601931,121.473083&spn=1.242132,2.705383&t=h&z=9&brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&output=embed"></iframe><br/><small><ahref="http://ditu.google.cn/?ie=UTF8&hq=&hnear=%E4%B8%8A%E6%B5%B7%E5%B8%82&ll=31.601931,121.473083&spn=1.242132,2.705383&t=h&z=9&brcurrent=3,0x35b27040b1f53c33:0x295129423c364a1,1%3B5,0,1&source=embed"style="color:#0000FF;text-align:left">查看大图</a></small>的代码，
直接把代码黏贴到你页面中，不需要调用任何JS函数，简单吧！
二、调用官方API
http://code.google.com/intl/zh-CN/apis/maps/index.html
根据自己的需求选择不同的API，这里我选用的是第一种GoogleMapsJavaScriptAPI，进入开发指南后，根据辅导手册我们能得到一下代码
<scriptsrc="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=ABQIAAAASxpUwpTIsah0HhFUu4CeXxTRPPg-t4qZV_Pkpf2GWNHxovB6dBSVLQqrNTBL8D2ww-FLdM4esrG8IQ"type="text/javascript">
<head>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
//加控件
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(31.188523, 121.436526), 13);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var point = new GLatLng(31.182385,121.439223);
map.addOverlay(new GMarker(point));
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>*三、调用中文参数函数Geocoder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;//地图生成类
var map;//地图
var oldInfoWindow;
/*初始化地图*/
function initialize() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': '上海市长宁区仙霞路317号远东国际广场B2403-2407室'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 14,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var newMarker = new google.maps.Marker({
position: results[0].geometry.location,
title:'日清纺织(上海)有限公司',
map:map
});
} else {
alert("错误状态" + status);
}
});
}
</script>
</head>
<body onLoad="initialize();">
<div id="map_canvas" style="height: 305px; width: 330px;"></div>
</body>
</html>注：
1.在http://code.google.com/intl/zh-CN/apis/maps/signup.html为你的url注册自己站内的一个key
2.map.addControl(newGSmallMapControl());map.addControl(newGMapTypeControl());是在地图上家一些控件，可以参考控件API自己改写！
3.map.setCenter(newGLatLng(31.188523,121.436526),13);参数经度纬度可以换成自己的，参数可以在地图上获取
4.varpoint=newGLatLng(31.182385,121.439223);这个是标注你的目的地
这只是简单实现，具体可以根据API自己实现...