Google Maps JavaScript API允许把Google地图嵌入到自己的网页内。要使用这个API，首先需要申请一个API key（http://code.google.com/apis/maps/signup.html）。收到API密钥之后，即可以按照本文档中的说明开发地图应用程序。
注意：为了使用中国的地图数据，需要使用来自ditu.google.com（或ditu.google.cn）的JavaScript代码。申请API密钥时自动生成的代码缺省指向maps.google.com。因此，需要手动将其改为ditu.google.com（或ditu.google.cn）。
5.1地图基础5.1.1Google Maps上的Hello World例子
任何Google地图API应用程序中的基础元素都是地图本身。重点讨论GMap2基础对象的用法和地图操作的基础。
学习这个API最简单的方法就是看一个简单的例子。下面的网页显示一个500x300的地图，中心位于California，Palo Alto：
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
不过在上传到自己的网站上运行之前，必须把其中的"&key="之后的授权码换成自己在Maps API key申请的授权码，否则看不到效果。
也需要注意五点：
1) 使用script标签包含地图API JavaScript。
2) 创建名为"map_canvas"的div元素存放地图。
3) 编写JavaScript函数创建“map”对象。
4) 将地图中的中心设置为给定的地理点。
5) 从body标签的onLoad事件初始化地图对象。
下面说明了这些步骤。
1．加载Google地图API
http://ditu.google.com/maps?file=api&v=2&key=abcdefg网址指向包含使用Google地图API所需所有符号和定义的JavaScript文件的位置。页面必须包含指向此网址的script标签，使用注册获取API时收到的密钥。此示例中，该密钥为“abcdefg”。
2．地图DOM元素
要使地图在网页上显示，必须为其留出一个位置。通常通过创建名为div的元素并在浏览器的文档对象模型(DOM)中获取此元素的引用执行此操作。
上述示例中，定义名为"map_canvas"的div，并使用样式属性设置其尺寸。地图会自动使用容器尺寸调整自身的尺寸，除非使用构造函数中的GMapOptions为地图明确指定尺寸。
3．GMap2——基本对象
var map = new GMap2(document.getElementById("map_canvas"));
表示地图的JavaScript类是GMap2类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）使用JavaScript new操作符创建此类的一个新实例。
当创建新的地图实例时，在页面中指定一个DOM节点（通常是div元素）作为地图的容器。HTML节点是JavaScript document对象的子节点，通过document.getElementById()方法获取对此元素的引用。
此代码定义一个变量（名为map），并将该变量分配给新的GMap2对象。函数GMap2()称为构造函数，其定义如下所示：
构造函数
描述
GMap2(container, opts?)
在给定的HTML container（通常是DIV元素）中创建新的地图。还可以传递 类型为GMap2Options的可选参数opts。
注意：因为JavaScript是松散类型的语言，可以不填写构造函数的任何可选参数，此处也未这样做。
4．初始化地图
map.setCenter(new GLatLng(39.917, 116.397), 14);
通过GMap2构造函数创建地图之后，还需要执行一个操作，即将其初始化。初始化通过地图的setCenter()方法完成。setCenter()方法需要GLatLng经纬度坐标和缩放级别，并且调用此方法必须在对地图执行任何其它操作（包括设置地图本身的任何其它属性）之前。
5．加载地图
当HTML页面显示时，文档对象模型(DOM)即会扩展，接收其他外部图像和脚本并将其合并到document对象中。为了确保只有在完全加载页面后才将的地图放在页面上，仅在HTML页面的元素收到onload事件后才执行构造GMap2的函数。以避免出现不可预期的行为，并可以对地图绘制的方式和时间进行更多控制。
onload属性是事件处理程序的示例。
GUnload()函数是设计为防止内存泄露的工具函数。
5.1.2经纬度已经有地图后还需要一种方式来引用地图的上位置。在Google地图API中，GLatLng对象提供了此类机制。可以构造一个GLatLng对象，按照制图学的惯例以（纬度，经度）的顺序传递参数：
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)
注意：将地址转换为地理点的过程称为地址解析（geocoding）。
就象它可用于轻松地引用地理点一样，它也可用于定义对象的地理边界。例如，显示整个中国的当前地图"窗口"，称为视图（viewport）。此视图可以通过四个角的点定义。GLatLngBounds对象提供此功能，使用分别表示边界框的西南角和东北角的两个GLatLng对象定义一个矩形区域。
示例使用getBounds()返回当前视图，然后在地图上这些边界内随机放置10个标记：
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
// 在随机位置向地图中添加 10 个标记
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
查看示例 (map-markers.html)
5.1.3地图属性地图包含用于了解各种情况的大量属性。例如，要了解当前视图的尺寸，请使用GMap2对象的getBounds()方法返回GLatLngBounds值。
每个地图还包含一个缩放级别，它定义当前视图的分辨率。普通地图视图中，可以使用0（最低缩放级别，在地图上可以看到整个世界）到19（最高缩放级别，可以看到每个建筑物）之间的缩放级别。缩放级别因所查看地区而异，因为地图上某些地区的数据比其它地区更详细。
可以通过使用GMap2对象的getZoom()方法检索当前地图所使用的缩放级别。
5.1.4地图交互有了GMap2对象，就可以与之进行交互了。GMap2对象还提供了大量配置方法来改变地图对象本身的行为和外观。
默认情况下，地图对象会和http://ditu.google.com上一样对用户的活动做出反应。可以使用大量工具函数改变此行为。例如，函数GMap2.disableDragging()禁用单击地图和将地图拖到新位置的功能。
还可以通过编程与地图交互。GMap2对象支持可以直接改变地图状态的大量方法。例如，setCenter()、panTo、zoomIn()和setCenter()方法以程序方式而不是通过用户交互在地图上操作。
以下示例显示一个地图，等两秒，然后平移到新的中心点。panTo方法将地图的中心设置在给定点。如果指定点在地图的可见部分，则地图会平稳地移动到该点，否则地图会跳到该点。
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(39.917, 116.397), 14);
window.setTimeout(function() {
map.panTo(new GLatLng(39.927, 116.407));
}, 1000);
《第5章 Google地图API开发指南》相关文档：
地图文案补充09-13
mapgis地图矢量化实验报告心得体会07-04
第5章 Google地图API开发指南09-28
用googlemapsAPI给首页添加Earth卫星地图09-28
谷歌地图接口整理09-28
mapgis地图矢量化实验报告心得体会10-16
班公湖实际控制地图10-18
地球和地图教学反思09-21
