最近想在當兵前
趁著比較閒的狀態下整理半年前美西行的內容(囧…Lag真久)
所以就研究一下Google Maps要如何使用
將心得整理一下囉:P
第一步：申請API Key
Google Maps為了方便控管以及使用者使用的方便
因此開放API讓使用者能在Google Maps的架構下客製化自己所需的Google Maps
所以我們要享用這方便的服務
就要透過申請API來達成
Google Maps有幾項條件
- 沒有限制每日瀏覽Google Maps的流量，但是假如每日流量大於50萬的話，請聯絡Google
- 透過Google Maps所產生的地點每日不能超過5萬個
- 透過API所產生的Google Maps並不會有任何廣告內容
- 透過API所產生的Google Maps只能用於終端使用者(End User)，若是商業用途請使用Google Maps for Enterprise
- 你不能修改或移除Google Logo或相關版權宣告
- Google會時常更新API，使用者有義務將程式內容修改為新版API(詳情請見Google Maps API Blog)
另外必須要注意的是Google Maps API是以網站目錄來看使用範圍
例如目前網站是架設在http://paoyuan.org/之下
那麼在申請時網站網址就必須填寫http://paoyuan.org/
若是架設在免費服務之下如http://blog.yam.com/blog/username/
那麼網址就是http://blog.yam.com/blog/username/
第二步：將Google Maps API程式碼帶入自己網頁中
例如
<!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"/>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA4MZ-h0ZdXoSk4LQVMft7cBT0EVcqKh9vosFUK_gST4-TPYlErhTHgoTvuIOZ3c_GTctOLIcIJ2FxHw"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
就可以獲得基本的Google Maps
下面是我用Google Maps API所弄出來的美西行程
(按此看大圖)
詳細資料可參考
syshen’s blog: Google Maps API 簡易使用文件
(註:Google Maps API已經更新為2版，所以有些程式碼是舊的)
Google Maps API Documentation
