Google 大全
看简单的例子是开始学习API的最有效的方法，这个网页在层上居中显示了一个300x300的地图:
<!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> <title>Google Maps JavaScript API Example - simple</title> <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script> </head> <body> <div id="map" style="width: 300px; height: 300px"></div> <script type="text/javascript"> //<![CDATA[ if (GBrowserIsCompatible()) { var map = new GMap(document.getElementById("map")); map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); } //]]> </script> </body></html> 你可以[url=http://www.step1.cn/GoogleAPI/map/simple.html][color=#0000ff]点这儿[/color][/url]预览这个例子的效果，不过在你上传到自己的网站上运行之前，你必须把其中的"&key="之后的授权码换成自己在[url=http://www.google.com/apis/maps/signup.html][color=#0000ff]Maps API key[/color][/url]申请的授权码，否则看不到效果.本网站使用的范例中的授权码只能在[url=http://www.step1.cn/][color=#0000ff]Step1.cn[/color][/url]域名上使用。
你可以看到，Google Maps使用了一个JavaScript文件([font=NSimsun]http://maps.google.com/maps?file=api&v=1[/font]) 这个文件包含了你在自己的网页上显示Google地图的所有的函数和类. 想要在自己的网页上使用Google Maps API，你必须在网页上通过[font=NSimsun]script[/font]标签连接一个包含你申请的授权码的URL:
<script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script> Google Maps API提供的最重要的类是[font=NSimsun]GMap[/font],它代表页面上的地图对象， 你可以根据需要在页面上使用多个[font=NSimsun]GMap[/font]的实例 每个地图被包含在一个HTML的容器(container)里面，比如DIV标签.
下面会讲到如何给地图实例添加和操作标注.
[url=]浏览器兼容性[/url]Google Maps并不是对每一个浏览器都兼容的， Google Maps 现在兼容Firefox/Mozilla, IE 5.5+, Safari 1.2+和Opera，不支持IE 5.0.因为每个不兼容的浏览器的动作又是不同的， 所以Maps API提供了一个全局的方法([font=NSimsun]GBrowserIsCompatible()[/font])来检查浏览器兼容性， 但是并不自动检查. 引入的脚本[font=NSimsun]http://maps.google.com/maps?file=api&v=1[/font]可以在几乎所有的浏览器中被正常解析， 所以你可以放心的在检查浏览器兼容性之前引入该脚本.
在本文的所有例子之中，除了上面的一篇之外，其他的既没有用[font=NSimsun]GBrowserIsCompatible()[/font]检查浏览器兼容性，也没有给出任何错误信息 正式使用的程序上应该有更加友好的处理方法，这里为了让这些例子更加易懂，而忽略了浏览器检查.
XHTML和VML建议你在需要使用地图的网页上使用标准的兼容性好的XHTML,当页面顶端存在[font=NSimsun]DOCTYPE[/font]标签时，浏览器会使用"标准兼容模式"来处理页面， 这将使页面能更好的跨越浏览器执行.
同样，如果你需要在地图上包含折线，你需要为IE浏览器在页面上引入VML命名空间 这样，你的文档开头就应该是这样的：
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <style type="text/css"> v\:* { behavior:url(#default#VML); } </style> <script src="http://maps.google.com/maps?file=api&v=1&key=www.godeyes.cn" type="text/javascript"></script> </head> 关于VML，你可以在[url=http://msdn.microsoft.com/workshop/author/VML/ref/appendix.asp][color=#0000ff]Microsoft's VML workshop[/color][/url]查找更多信息.
API更新引入的JavaScript文件URL[font=NSimsun]http://maps.google.com/maps?file=api&v=1[/font]指向到 API 的"版本1"， 如果API出现了重要的升级，会增加这个版本号并且在[url=http://code.google.com/][color=#0000ff]Google Code[/color][/url]和[url=http://groups-beta.google.com/group/Google-Maps-API][color=#0000ff]Maps API讨论组[/color][/url]上面发布公告.
Google会同时运行新版和旧版一个月左右，随后旧版就会被关闭.
地图工作小组会在修复BUG或改善性能之后随时更新API，这些更新仅仅是为了改善性能和修复错误，不过在这个工程之中也可能发生影响API连接的情况 如果这样的事情发生，你可以到[url=http://groups-beta.google.com/group/Google-Maps-API][color=#0000ff]Maps API discussion group[/color][/url]报告你遇到的情况
地理、行程和其他Google Maps API现在并不包含[url=http://en.wikipedia.org/wiki/Geocoding][color=#0000ff]地理[/color][/url]和 行程服务,可在网上有许多关于[url=http://www.google.com/search?q=free+geocoder][color=#0000ff]free geocoders[/color][/url]的相关内容.
[url=]应用范例[/url]
[url=]一个简单例子[/url]创建一个在所在层中居中的地图
var map = new GMap(document.getElementById("map"));map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); [url=http://www.step1.cn/GoogleAPI/map/simple.html][color=#0000ff]查看范例(simple.html)[/color][/url]
[url=]地图的移动和变换[/url][font=NSimsun]recenterOrPanToLatLng[/font] 方法进行一个地图变换，目标点经/纬在当前视口之中时执行一个连续的动作，否则，执行不连续的变换动作
var map = new GMap(document.getElementById("map"));map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);window.setTimeout(function() { map.recenterOrPanToLatLng(new GPoint(-122.1569, 37.4569));}, 2000); [url=http://www.step1.cn/GoogleAPI/map/animate.html][color=#0000ff]查看范例(animate.html)[/color][/url]
[url=]在地图上添加控件[/url][font=NSimsun]addControl[/font]方法可以在地图上添加控件，并且集成了[font=NSimsun]GSmallMapControl[/font](用来缩放和移动图片)和[font=NSimsun]GMapTypeControl[/font](用来在地图和卫星图模式间切换)两个控件.
var map = new GMap(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); [url=http://www.step1.cn/GoogleAPI/map/controls.html][color=#0000ff]查看范例(controls.html)[/color][/url]
[url=]事件监视[/url][font=NSimsun]GEvent.addListener[/font]用来注册事件监视器，在这个例子中，在用户移动或拖拽地图后，输出地图中心点的经/纬.
var map = new GMap(document.getElementById("map"));GEvent.addListener(map, "moveend", function() { var center = map.getCenterLatLng(); var latLngStr = '(' + center.y + ', ' + center.x + ')'; document.getElementById("message").innerHTML = latLngStr;});map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); [url=http://www.step1.cn/GoogleAPI/map/event.html][color=#0000ff]查看范例(event.html)[/color][/url]
[url=]显示信息浮窗[/url]这个范例显示一个指向地图中心点的"Hello world"信息浮窗，这里信息浮窗显示在指向点的上面，而实际上，信息窗能在地图的任何地方显示.
var map = new GMap(document.getElementById("map"));map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);map.openInfoWindow(map.getCenterLatLng(), document.createTextNode("Hello world")); [url=http://www.step1.cn/GoogleAPI/map/infowindow.html][color=#0000ff]查看范例(infowindow.html)[/color][/url]
[url=]地图标注[/url]本范例通过创建10个随机的标注和折线来说明地图标注的用法.
// Center the map on Palo Altovar map = new GMap(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);// Add 10 random markers in the map viewport using the default iconvar bounds = map.getBoundsLatLng();var width = bounds.maxX - bounds.minX;var height = bounds.maxY - bounds.minY;for (var i = 0; i < 10; i++) { var point = new GPoint(bounds.minX + width * Math.random(), bounds.minY + height * Math.random()); var marker = new GMarker(point); map.addOverlay(marker);}// Add a polyline with 4 random points. Sort the points by longitude so that// the line does not intersect itself.var points = [];for (var i = 0; i < 5; i++) { points.push(new GPoint(bounds.minX + width * Math.random(), bounds.minY + height * Math.random()));}points.sort(function(p1, p2) { return p1.x - p2.x; });map.addOverlay(new GPolyline(points)); [url=http://www.step1.cn/GoogleAPI/map/overlay.html][color=#0000ff]查看范例(overlay.html)[/color][/url]
[url=]响应用户点击[/url]本范例在用户点击地图时，在相应的点创建一个标记，用户点击标记时，移除这个标记.
var map = new GMap(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);GEvent.addListener(map, 'click', function(overlay, point) { if (overlay) { map.removeOverlay(overlay); } else if (point) { map.addOverlay(new GMarker(point)); }}); [url=http://www.step1.cn/GoogleAPI/map/click.html][color=#0000ff]查看范例(click.html)[/color][/url]
[url=]在标记上显示信息浮窗[/url]在这个例子中，点击每一个标记，就会在标记上面显示一个自定义的信息浮窗.
// Center the map on Palo Altovar map = new GMap(document.getElementById("map"));map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);// Creates a marker whose info window displays the given numberfunction createMarker(point, number) { var marker = new GMarker(point); // Show this marker's index in the info window when it is clicked var html = "Marker #<b>" + number + "</b>"; GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker;}// Add 10 random markers in the map viewportvar bounds = map.getBoundsLatLng();var width = bounds.maxX - bounds.minX;var height = bounds.maxY - bounds.minY;for (var i = 0; i < 10; i++) { var point = new GPoint(bounds.minX + width * Math.random(), bounds.minY + height * Math.random()); var marker = createMarker(point, i + 1); map.addOverlay(marker);}