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

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

No Comment.

Add Your Comment

Your Comment