製作地圖方式二 (套用 Google's AJAX APIs )

製作地圖方式二 (套用 Google's AJAX APIs )：

第一步驟：我們可以將範例裡面其中的這一段：
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAMjXPFRwPVUT34ElVEbxaxTATQLkw1v6gTWZDRbqEhXlQ01ELRTWTUO_dRlAuruUuSONenDXSTPq5w" type="text/javascript"></script>
改寫並套用 Google's AJAX APIs 成為：
<script src="http://www.google.com/jsapi?key=ABQIAAAAAMjXPFRwPVUT34ElVEbxaxTATQLkw1v6gTWZDRbqEhXlQ01ELRTWTUO_dRlAuruUuSONenDXSTPq5w" type="text/javascript"></script>

第二步驟：然後使用 google.load 指定在網頁上使用的模組：
<script type="text/javascript">
google.load("maps", "2", {"locale" : "UTF-8"});
</script>

第三步驟：如果你要用 google translate language api 可改用：
//google language api
google.load("language", "1");

第四步驟：接下來是使用官方提供的地址解析(轉換經度緯度)功能：
<script type="text/javascript">
function showAddress(address, message, map_id_name) {
if (GBrowserIsCompatible()) {
//alert(address);
map = new GMap2(document.getElementById(map_id_name));
map.addControl(new GSmallMapControl());
geocoder = new GClientGeocoder();
geocoder.getLatLng(address, function(point) {
if (!point) {
map.setCenter(new GLatLng(23.634416,120.970529), 7);
var marker = new GMarker(new GLatLng(23.634416,120.970529));
map.addOverlay(marker); marker.openInfoWindowHtml("找不到該地址，無法顯示相關地圖");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(message);
}
});
}
}
</script>

第五步驟：最後只要在您的網站或 blog 文章裡面貼上區塊及地址等資訊定位：
<div id="map_address2" style="width: 600px; height: 400px"></div>
<script type='text/javascript'>
window.load(showAddress("臺北縣汐止市龍安路185號4樓","工作室：網頁研習室
地址：臺北縣汐止市龍安路 185 號 4 樓
市話：(02)2647-3677 手機：0933-895367<br>服務項目：網頁製作、網頁教學、程式教學、程式製作", "map_address2"));
</script>

第六步驟：這樣就算完成了
請看實做範例 Go ，並按檢視原始碼查看製作方式。

網頁研習室 - HTML教學 - 電子報教學 - 李文能 - 編輯