图 7 展示了添加标记后的地图：
图 7. 带标记的地图
现在您已经知道如何添加一个单一的点，但要自动地添加数据库里的所有点，还需要做两个小的更改。第一个更改是在 AirportController 中生成 map 闭包，这会返回一个 Airport 列表，如清单 15 所示：
清单 15. 返回一个 Airport 列表
def map = {
[airportList: Airport.list()]
}
[airportList: Airport.list()]
}
接下来，需要遍历 Airport 列表并为每个 Airport 创建标记。在本系列的早期文章中，曾经介绍使用 标记向 HTML 表添加行。清单 16 使用这个标记创建必要的 JavaScript 行，这样才能在地图上显示 Airport：
清单 16. 动态地为地图添加标记
<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());
<g:each in="${airportList}" status="i" var="airport">
var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
var marker${airport.id} = new GMarker(point${airport.id})
marker${airport.id}.bindInfoWindowHtml("${airport.iata}<br/>${airport.name}")
map.addOverlay(marker${airport.id})
</g:each>
}
}
</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());
<g:each in="${airportList}" status="i" var="airport">
var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
var marker${airport.id} = new GMarker(point${airport.id})
marker${airport.id}.bindInfoWindowHtml("${airport.iata}<br/>${airport.name}")
map.addOverlay(marker${airport.id})
</g:each>
}
}
</script>
图 8 展示了自动添加了标记后的地图：
图 8. 带有多个标记的地图
这个针对 Google Maps API 的简单介绍只涉及到些皮毛，您可以进行的操作远不止这些。您可能已经决定利用事件模型来实现 Ajax 调用，当单击标记时就会返回 JavaScript Object Notation(JSON)数据。您可以使用 GPolyline 在地图上描绘一个旅途中的各段行程。可以实现无限的可能性。要获得更多的信息，可以参考 Google 的在线文档。您也可以从我的 PDF 书籍 Google Maps API 获得关于 API 的适当介绍。
