使用Google Map API

AJAX是Asynchronous JavaScript + XML的缩写。它的目标是创造和基于桌面系统的应用一样丰富和相同响应方式的Web应用，并可以使用多种浏览器方便的访问。

　　AJAX模型的一个著名应用就是Google Maps。你可以在http://maps.google.com上充分的使用它，并且惊讶于它的快速缩放能力和拖动能力。那么能不能把它强大的能力结合到你自己的应用程序里呢，这样不但你可以使用到它那强大的数据库，也可以使用它非常cool的界面。

　　Google已经提供了一个免费的 Google Map API ，使得你很容易实现以上的想法。只要你同意使用规定，并且不要未经允许使得页面拥有超过每天50000的浏览量，你可以随意在自己的web站点使用Google的地图技术。本文将介绍如何实现这一点，尤其你将学会如何将地图集成到页面里，给用户标识出感兴趣的地点，甚至可以在点击某个关联的图标时给出一个地点相关的描述。目前使用Google这项技术的有http://www.chicagocrime.org，http://www.housingmaps.com/ 等等。

　　系统需求

　　使用Google Map API，你无需其他特别的web开发工具，所需的仅是文本编辑器，Web浏览器，和一个保存写好的web页面和脚本的web服务器。注意这里必须使用公开的web服务器，你不能使用内部服务器，因为每个请求都必须和Google Map的服务器交互。你需要在Google上注册并获取一个API的Key来使用，注意先访问这个站点了解相关的使用规则和申请方式：

　　http://www.google.com/apis/maps/signup.html

　　你需要将key和你的脚本进行集成以正确创建和显示你所需要的地图。

　　第一个地图

　　使用Google Map非常简单，只需要短短几行代码即可。你可以将以下的代码存储为HTML文件，并且将ADD_YOUR_KEY_HERE替换成你得到的API的Key，然后上传到自己的web服务器上。

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜script src="http://maps.google.com/maps?file=api&v=1 &key=ADD_YOUR_KEY_HERE" type="text/javascript"＞
＜/script＞
＜/head＞
＜body＞
＜div id="map" style="width: 400px; height: 300px"＞＜/div＞
＜script type="text/javascript"＞
//＜![CDATA[ var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-83.022206, 39.998264), 3); //]]＞
＜/script＞
＜/body＞
＜/html＞

　　访问web服务器上的这个html文件，你在浏览器中看到俄亥俄州立大学的地图：

　　在以上的脚本里有4个关键的地方，以下的代码片断是使得你可以使用Google Map服务的，但是你必须提供你自己的API Key：

＜script src="http://maps.google.com/maps?file=api&v=1&key=ADD_YOUR_KEY_HERE" type="text/javascript"＞

　　下面一些代码规定了html页面中页面的显示大小：长度，宽度。你可以把它放置到页面文件中的任何一行，使用表格和CSS都可以：

＜div id="map" style="width: 400px; height: 300px"＞＜/div＞＜script type="text/javascript"＞

　　下面的代码创建一个GMap的对象（从Goolge的JavaScript脚本中的一个类进行实例化），使用它操纵其他的显示和控制部分：

var map = new GMap(document.getElementById("map"));

　　最后，显示的地图的中心的经度是-83.022206和纬度39.998264。Gpoint的构造器的第二个参数是表明地图的俯视高度，1是最低的高度，16是最高的高度。