2006
07.08

Google Maps

Category: Information / Tag:  / Add Comment

最近想在當兵前
趁著比較閒的狀態下整理半年前美西行的內容(囧…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&amp;v=2&amp;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