现在，浏览 http://localhost:9090/trip/airport/map，您将看到已嵌入的 Google Map，如图 5 所示：
图 5. 简单的 Google Map
现在先回到 map.gsp 并调整值，如清单 13 所示：
清单 13. 调整基本的地图
<script type="text/javascript">
var usCenterPoint = new GLatLng(39.833333, -98.583333)
var usZoom = 4
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"))
map.setCenter(usCenterPoint, usZoom)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 400px"></div>
</body>
var usCenterPoint = new GLatLng(39.833333, -98.583333)
var usZoom = 4
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"))
map.setCenter(usCenterPoint, usZoom)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 400px"></div>
</body>
要查看整个美国，将尺寸设置为 800 x 400 像素是比较好的。清单 13 调整了中心点和缩放级别，使您能够看到完整的地图。您还可以添加许多不同的地图控制。清单 13 中的 GLargeMapControl 和 GMapTypeControl 分别在地图左边和右上角提供了常用的控制。在您调试时不断点击浏览器的 Refresh 按钮，查看修改后的效果。图 6 反映了对清单 13 所做的调整：
图 6. 调整后的地图
现在基本的地图已经做好， 接下来就可以添加标记了 — 为每个机场添加图钉。在将这一过程自动化之前，我在清单 14 中手工添加了一些简单的标记：
清单 14. 将标记添加到地图
<script type="text/javascript">
var usCenterPoint = new GLatLng(39.833333, -98.583333)
var usZoom = 4
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"))
map.setCenter(usCenterPoint, usZoom)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(39.8583188, -104.6674674))
marker.bindInfoWindowHtml("DEN<br/>Denver International Airport")
map.addOverlay(marker)
}
}
</script>
var usCenterPoint = new GLatLng(39.833333, -98.583333)
var usZoom = 4
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"))
map.setCenter(usCenterPoint, usZoom)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(39.8583188, -104.6674674))
marker.bindInfoWindowHtml("DEN<br/>Denver International Airport")
map.addOverlay(marker)
}
}
</script>
GMarker 构造器采用了一个 GLatLng 点。bindInfoWindowHtml 方法提供了用户单击标记时在 Info 窗口内显示的 HTML 文件片段。最后，清单 14 还通过使用 addOverlay 方法将标记添加到地图。
