一、Google地图API介绍
很多人都使用过Google的地图服务(http://maps.google.com)，如下图为南京附近的Google地图效果：
Google为了方便用户，对网站用户提供了Google map API服务，允许用户定制地图整合到用户网站中，并且可以在地图中通过添加标注的方式添加图片、线路图。
使用Google地图API具备以下条件：
(1) 有可以发布的网站
(2) 具备一定的网站编程能力
(3) 具有一定的地理知识
用户定制的效果可以访问：http://www.njcit.cn/page/maps.html
[page]二、Google地图API使用说明[/page]二、Google地图API使用说明
1. 获取地图 API 密钥
Google为了管理API的用户，会给每个用户分配一个密钥，这个密钥的申请和使用都是免费的，用户只要输入使用地图的网站地址就可以了。
申请密钥网址：
http://code.google.com/intl/zh-CN/apis/maps/signup.html
注意：申请前你必须先用一个Google的Gmail账号。
2. 获取用户的地理信息
地图是根据经度和纬度来定位的，所以要定制地图，就应该知道需要的地图中心的位置，这可以通过访问http://maps.google.com找到相应的目标位置，调整地图，将目标位置置于地图中心位置，单击地图右上方的“链接”这时会弹出下图的两行文本框：
将上一行的文本框内容复制到记事本中会看到如下的内容：
http://maps.google.com/maps?f=q&source=s_q&hl=zh-CN&q=&ie=UTF8&geocode=Ff0r6QEdtLAUBw&split=0&ll=32.128088,118.939705&spn=0.015228,0.027595&z=15
在上面的文字中加粗的就是地图的中心坐标位置，这个参数就用来作为定制地图的坐标信息。
3. 基本的地图代码
下面是基本的地图代码，用户将密钥替换掉“你的密钥”将其放置到一个基本的网页中，并且上传到你指定的网站中就可以打开地图：
<script type="text/javascript" src=http://www.google.cn/jsapi?key=你的密钥></script>
<script type="text/javascript">
google.load("maps", "2.x", {base_domain: "ditu.google.cn", language: "zh-CN"});
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new google.maps.LatLng(32.124999,118.925157), 12); //(32.124999,118.925157), 12前面是坐标，后是放大的大小
}
google.setOnLoadCallback(initialize);
</script>
<div id="map" style="width: 980px; height: 540px"></div> ; //指定地图的大小
4. 添加标注的地图代码
<script type="text/javascript" src=http://www.google.cn/jsapi?key=你的密钥></script>
<script type="text/javascript">
google.load("maps", "2.x", {base_domain: "ditu.google.cn", language: "zh-CN"});
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new google.maps.LatLng(32.124999,118.925157), 12);
var home_point = new GLatLng(32.12472,118.94225) ; //指定标注的位置
map.addOverlay(new GMarker(home_point)); //默认标注
}
google.setOnLoadCallback(initialize);
</script>
<div id="map" style="width: 980px; height: 540px"></div> ; //指定地图的大小
5. 添加学校名称作为标注的代码<script type="text/javascript" src=http://www.google.cn/jsapi?key=你的密钥></script>
<script type="text/javascript">
google.load("maps", "2.x", {base_domain: "ditu.google.cn", language: "zh-CN"});
// Call this function when the page has been loaded
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.setCenter(new google.maps.LatLng(32.124999,118.925157), 12);
var home_point = new GLatLng(32.12472,118.94225) ; //指定标注的位置
var icon1 = new GIcon();
icon1.image = "http://www.njcit.edu.cn/images/njcitmap.gif"; //图片所在位置
icon1.iconSize = new GSize(190, 30); //图片大小
icon1.iconAnchor = new GPoint(95, 14); //图片的锚点
map.addOverlay(new GMarker(home_point, icon1)); //图形标注
map.addOverlay(new GMarker(home_point)); //默认标注
}
google.setOnLoadCallback(initialize);
</script>
<div id="map" style="width: 980px; height: 540px"></div> ; //指定地图的大小
说明：图片可以使用透明背景的GIF图，这样效果比较好。
最终用户定制的效果可以访问：http://www.njcit.cn/page/maps.html
