目前，随着web平台的日渐成熟，越来越多的新技术如雨后春笋般出现，将我们的应用提升到新的高度。目前最吸引全世界web应用开发者眼球的技术就是AJAX模型，它是Asynchronous JavaScript + XML的缩写。它揭示了目前Web开发社区的目标是创造和基于桌面系统的应用一样丰富和相同响应方式的Web应用，却可以使用多种浏览器方便的访问。

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

　　你也许会惊讶Google已经提供了一个免费的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文件，你在浏览器中看到俄亥俄州立大学的地图：