本文中将使用工具轻松构建终极的Hello World mashup：Google地图mashup……
查看下面的 HTML 片断来了解这一结构：
| <table> <tr> <td valign="top"> <div id="google_map_div" style="width: 500px; height: 300px"> </div> </td> <td valign="top"> <p id="getLocations_div" align="center"> <> <form id="getLocationsForm"> <input value="Get the Locations" type="submit" onclick="javascript:getLocationsAndMap();return false" /> </form> </p> <p> <div id="locations_div"> <> </div> </p> </td> </tr> </table> |
请注意，当用户按下按钮时，将触发一个onclick 事件。该事件连接到了前述getLocationsAndMap() 函数，该函数将调用针对REST 服务的XMLHttpRequest。您已经看到，getLocationsAndMapCallback() 函数之后会将服务响应从JSON 文本转换为注入到DOM 的HTML。
现在，您需要将地址组合到Google 地图中。首先，getLocationsAndMapCallback() 中的JavaScript 代码会编写HTML ，因此每个地址都会有一个调用JavaScript 函数的锚定标记。函数showAddress()和代码会传递所点击的位置地址。以上代码中getLocationsAndMapCallback()函数的 TODO注释替换为这行代码：
| var anchor = ‘<a href="irrelevant" onclick="javascript:showAddress(\‘‘+ response.locations.location[i].address+‘\‘);‘+ ‘ return false">‘; |
这会为每个地址创建一个锚定标记，单击地址时就会触发showAddress() 函数。
下一步，showAddress() 函数会连接到Google 地图 API，由它真正在地图中显示传递过来的地址。这是通过Google 提供的样板代码来完成的。请注意以下代码中的GMap2 和 geocoder 对象，它们都是作为Google地图API的一部分提供的。该代码将检索地图，然后更新HTML 文档的google_map_div div 标记。
| function showAddress(address) { var map = new GMap2( document.getElementById("google_map_div")); var geocoder = new GClientGeocoder(); geocoder.getLatLng(address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } |
无论您相信与否，这样就完成了Ajax支持的Google 地图 mashup!在本教程中我还没有展示完整的文件，我展示的是重要部分。查看下载一节，获取完整代码。
