现在我们回到开头的地方看看我们辛勤工作的成果——调用一个地图，把我们自己的标记加到上面。Google发明了一个伟大的API并制作了示例文档，内容涵盖让您能够完成从一无所有到获得一个功能强大的漂亮Mashup程序的整个过程，所以我们不需要重复它，只需要获得完成我们任务所需要的东西就可以了。
要显示一个地图您必须使用Google Maps API脚本、一个带有“map”id的div，然后用代码调用函数来引导api显示您希望看到的东西。
我们尽力让用户界面（UI）与标准的Google Maps用户界面接近。这意味着我们增加了大地图控制（左边的缩放和箭头）、地图类型控制（让您能够在地图、卫星图和混合视图之间进行选择），以及鸟瞰地图控制（也就是右下角的鸟瞰图）。然后我们需要告诉地图我们希望看到什么，通过反复试验和失败，我们找到了在地图中心完美显示澳大利亚的经度和纬度以及缩放尺度。
到了现在，我们需要取回已经缓冲的结果并用它们创建一个javascript数组，使用数组而不是完全根据这些结果添加标记的原因很快就会显现出来。利用这个javascript数组，我们用定义的createMarker函数把标记添加到地图上。这个函数接受三个参数：固定标记的点、有什么用户组，以及一个我们今后可能会调用的参数；现在它会把文字放到标记上，并把标记固定到我们传递给它的点上。
这样我们有了一个功能完备的地图，上面有我们想要的标记，相当漂亮，但是在地图上导航仍然是一个大问题，所以我们需要对界面进行更进一步的改进。这就是地图右下角地名列表的作用。Panhandle函数会设置缩放的级别并展开到我们传递给它的那一点。通过搜索Google Maps，我们能够在地图上找到大多数用户组地址的经度和纬度；幸运的是，只有少数几个地址我们不得不放到Scraper里，这肯定是我们下一步需要改进的地方。
在这个页面上我们定义的最后一个方法是findme。这个方法由用户组名子列表旁边的小图标在使用。它用来搜索先前创建的javascript数组，并查找用户组的名字，一旦找到了用户组，地图就被展开并以用户的位置为中心显示出来。
下面就是我们地图文件的完整列表：
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<style type="text/css">
v:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABCD1234"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var defcentre = new GLatLng(-30.25,148);
var pointarr = new Array();
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(defcentre, 3);
function createMarker(point, who, when) {
// Our info window content
var infoTabs = [
new GInfoWindowTab("Who", who),
//new GInfoWindowTab("When", when)
];
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
return marker;
}
<?
include("resultsfile.htm");
foreach(unserialize(base64_decode($GLOBALS['usergroup_array'])) as $latkey => $latarr){
foreach($latarr as $longkey => $text){
?>
pointarr.push(new Array([?= $latkey?], [?= $longkey?], "[?= $text?]"));
<?
}
}
?>
for(i=0;i<pointarr.length;i++){
map.addOverlay(createMarker(new GLatLng(pointarr[i][0], pointarr[i][1]), pointarr[i][2], "Time unknown"));
}
}
}
function panhandle(lat, longi, zoom){
map.setZoom(zoom);
window.setTimeout(function() {map.panTo(new GLatLng(lat, longi));}, 1000);
}
function findme(name){
for(i=0;i<pointarr.length;i++){
if(pointarr[i][2].indexOf(name)> -1){panhandle(pointarr[i][0], pointarr[i][1], 13);break;}
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()" style="background:white;margin:0;padding:0;font:11px black arial,verdana,sans-serif;">
<div id="map" style="width: 450px; height: 300px;float:left"></div>
<dl class="first" style="float:left">
<dt><a href="javascript:panhandle(-33.869988,151.209984, 10)">Sydney</a></dt>
<dt><a href="javascript:panhandle(-37.810055,144.959965, 11)">Melbourne</a></dt>
<dt><a href="javascript:panhandle(-35.310001,149.130004, 11)">Canberra</a></dt>
<dt><a href="javascript:panhandle(-27.459999,153.020004, 11)">Brisbane</a></dt>
<dt><a href="javascript:panhandle(-34.93,138.600006, 11)">Adelaide</a></dt>
<dt><a href="javascript:panhandle(-31.959999,115.83999, 11)">Perth</a></dt>
<dt><a href="javascript:panhandle(-42.849998,147.289993, 11)">Hobart</a></dt>
<dt><a href="javascript:panhandle(-32.919998,151.75, 11)">Newcastle</a></dt>
<dt><a href="javascript:panhandle(-34.419998,150.869995, 11)">Wollongong</a></dt>
<dt><a href="javascript:panhandle(-26.517892,153.096542, 9)">SunshineCoast</a></dt>
<dt><a href="javascript:panhandle(-23.7,133.869995, 11)">Alice Springs</a></dt>
</dl>
</body>
</html>
最终的想法和今后的改进
目前，我们的用户组列表显示了用户组里的完整地址，虽然从原则上讲是没有任何问题的，但是这使得页面过长，而且信息多多少少有些多余，因为这些信息在地图本身里也显示了。因此我们在地址元素和org类里放了一个display:none以保持列表就像现在看起来的那样，只有名字。
上面的地图文件通过使用iframe放在了我们用户组页面上，所以我们需要使用一些javascript的技术进入iframe的内部去调用findme函数：
javascript:top.document.getElementById('mapframe').contentWindow.findme('SydneyDeep .Net User Group')
已经完成的所有工作的另外一个好处是我们能够用Firefox的Tails扩展件来查看我们已经创建的hCard，这也是不需要任何额外工作就查看用户组列表的另外一种方式。
根据未来的计划，createMarker扮演着一个非常好的桥梁作用。如果用户组网站使用hCal会议microformat，我们就能够将它们集成到地图中，显示下次会议的地点、时间和日期。
我不知道您是怎么想的，但是我想这是极其好玩和有用的。
责任编辑：张琎
