一、Hello world
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>
<body>
<div id="mapContainer" style="height:600px; width:800px;"></div>
</body>
<script type="text/javascript">
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(33.0, 106.0), 5);
</script>
</html>
1.<script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&v=2.x&sensor=false&key=ABQIAAAANRezeZZ4Y86oPrQq_VldhRRVHwv1xZ1uiERqpxy2XNaDfXdQnhSgufHt51owMdzuslJluCsiEbNIPg" type="text/javascript"></script>
网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。
key是密钥，v是版本
2.var map = new GMap2(document.getElementById("mapContainer")); 页面里必须有id为mapContainer的元素来放地图内容
3.map.setCenter(new GLatLng(33.0, 106.0), 5); 设置中心点，第一个参数是表示经纬度，第二个参数表示地图缩放等级。
二、简单讲解
1.<body onload="initialize()" onunload="GUnload()">
可以用initialize()方法来初始化地图，GUnload()方法是谷歌提供的，用来防止内存泄漏的实用工具函数。
2.new GLatLng(myLatitude, myLongitude)
myLatitude经度，myLongitude纬度
3.地图属性
G_NORMAL_MAP- 默认视图
G_SATELLITE_MAP - 显示 Google 地球卫星图像
G_HYBRID_MAP - 混合显示普通视图和卫星视图
G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用
map.setMapType(G_SATELLITE_MAP);
4.信息窗口
GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。
GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
var myHtml= "<b>#" + number+ "</b><br/>" + message[number-1];
map.openInfoWindowHtml(map.getCenter(), myHtml);
5.事件监听器
1）点击地图后弹框
GEvent.addListener(map, "click", function() {
alert("您点击了地图。");
});
2）拖动地图后，显示经纬度
GEvent.addListener(map, "moveend", function() {
var center= map.getCenter();
document.getElementById("message").innerHTML= center.toString();
});
3）带参数的事件
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
var myHtml= "GPoint 为: " + map.fromLatLngToDivPixel(latlng) + ",
缩放级别:" + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
三、添加控件
GLargeMapControl - 一个在 Google 地图上使用的大平移/缩放控件。默认情况下显示在地图的左上角。
GSmallMapControl - 一个在 Google 地图上使用的小一点的平移/缩放控件。默认情况下显示在地图的左上角。
GSmallZoomControl - 小型缩放控件（无平移控件），用于在 Google 地图上显示行车路线的小地图弹出窗口。
GScaleControl - 地图比例尺
GMapTypeControl - 让用户切换地图类型（例如“地图”和“卫星”）的按钮
GHierarchicalMapTypeControl - 用于放置多个地图类型选择器的一组精选的嵌套按钮和菜单项。
GOverviewMapControl - 位于屏幕一角的可折叠概览地图。
map.addControl(new GLargeMapControl());
所有这些控件都基于 GControl 对象。
GMapTypeControl 和 GHierarchicalMapTypeControl 是特殊情况，因为它们还可以进行配置。这些控件增加的功能可以更改 Google 地图 API 中的地图当前所用的 GMapType。有关配置这些控件的详细信息，请参见修改标准控件的结构。
下面是当前支持的地图类型列表：
•G_NORMAL_MAP 显示 Google 地图默认的普通二维图块
•G_SATELLITE_MAP 显示拍摄的图块
•G_HYBRID_MAP 同时显示拍摄的图块和普通（突出显示道路、城市名等明显地图特征）图块
•G_PHYSICAL_MAP 根据地形信息显示实际地图图块
addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角：
•G_ANCHOR_TOP_RIGHT
•G_ANCHOR_TOP_LEFT
•G_ANCHOR_BOTTOM_RIGHT
•G_ANCHOR_BOTTOM_LEFT
如果不包含此参数，则地图 API 会使用控件指定的默认位置。
GControlPosition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。
var bottomRight= new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
map.addControl(new GMapTypeControl(), bottomRight);
四、地图叠加层
叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。叠加层用于反映您“添加”到地图上以指明点、线或区域的对象。。
地图 API 有如下几种叠加层：
•地图上的点使用标记来显示，通常显示自定义图标。标记是 GMarker 类型的对象，并且可以利用 GIcon 类型的对象来自定义图标。
•地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。
•地图上的区域显示为多边形（如果是任意形状的区域）或底面叠加层（如果是矩形区域）。多边形类似于闭合的折线，因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。
•地图本身使用图块叠加层显示。如果您有自己的系列图块，可以使用 GTileLayerOverlay 类来改变地图上已有的图块，甚至可以使用 GMapType 来创建您自己的地图类型。
•信息窗口也是一种特殊的叠加层。但是请注意，信息窗口会自动添加到地图中，并且地图只能添加一个类型为 GInfoWindow 的对象。
每个叠加层都实现 GOverlay 接口。可以使用 GMap2.addOverlay() 方法向地图添加叠加层，使用 GMap2.removeOverlay() 方法删除叠加层。
1)标记
map.addOverlay(new GMarker(new GLatLng(x,y)));
可以拖动的标记
标记可点击但不可拖动，所以它们需要通过将额外的标记选项 draggable 设置为 true 来初始化。
var marker= new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("弹起来了...");
});
map.addOverlay(marker);
2）图标（标记）
var blueIcon= new GIcon(G_DEFAULT_ICON);
blueIcon.image= "http://www.google.cn/intl/en_us/mapfiles/ms/micons/blue-dot.png";
var markerOptions= { icon:blueIcon};
map.addOverlay(new GMarker(point, markerOptions));
3) 折线
折线在地图上绘制为一系列直线段。可以自定义这些线段的颜色、粗细和透明度。颜色应是十六进制数字 HTML 样式，例如使用 #ff0000 而非 red。GPolyline 无法识别命名颜色。
GPolyline 对象使用浏览器的矢量绘制功能（如果可用）。在 Internet Explorer 中，Google 地图使用 VML（请参阅 XHTML 和 VML）绘制折线；在其他浏览器中使用 SVG（如果可用）。在所有其他环境中，我们从 Google 服务器请求一个线段图像并将该图像叠加到地图上，当地图缩放和拖动时按需要刷新图像。
以下代码段会在两点之间创建 10 像素宽的红色折线：
var polyline= new GPolyline([
new GLatLng(39.9493, 116.3975),
new GLatLng(39.9593, 116.4071)
], "#ff0000", 10);
map.addOverlay(polyline);