返回列表 回復 發帖

技巧:如何為個人網站添加谷歌地圖服務

  筆者最近搞了一個域名,準備做個博客也隨潮流一把。見到Google Maps上的地圖十分方便醒目,如果能把這個地圖集成到個人網站中既方便了自己也方便了來訪的朋友。而我們所需的這一切Google早已經提供相應的API,剩下來的只是按部就班的去做了。

  下面明確一下需求:在個人網站中添加Google Maps服務。向下面的谷歌地圖一樣,把它做到自己的網站上。(效果與Google Maps瀏覽地圖方式一樣,支持拖拽、放大等。)

Google Maps

  好的,需求已經明確。下面就請隨筆者一步一步實現吧。

  在正式開始之前,首先需要具備以下條件:

  1,具備一個屬於自己的域名,如http://www.yourname.com
  2,具備該域名下空間的文件管理權限,如FTP等。
  3,一個Google帳戶,沒有可以去http://www.google.com註冊

  首先,登陸Google主頁登陸用戶賬號,接著進入Google 地圖 API官方網站[點擊進入]找到「註冊以獲得API密鑰」。Google地圖API允許用戶將Google 地圖嵌入到自己的網頁中,但一個地圖API密鑰只針對一個網絡服務器上的一個「目錄」有效。


  所以,如果我們要使用Google地圖的API服務,就必須申請密鑰。這裡需要提前設計好自己的「目錄」。什麼是「目錄」呢?就是你網站域名下的一個「文件夾」。


利用FTP客戶端在域名根目錄下創建「google」目錄

  如筆者的域名是http://www.wangziyi.com ,那麼筆者可以在域名根目錄下建立一個名為「google」(這裡最好全部使用小寫)的文件夾,所以在註冊Google 地圖 API密鑰時要輸入的網站就是:http://www.wangziyi.com/google

目錄建立完畢之後,點擊註冊Google 地圖 API頁面上的「生成API密鑰」

  生成之後將顯示:


  上圖即是利用http://www.wangziyi.com/google 目錄生成的密鑰頁面以及一個參考基本地圖代碼。

註:該密鑰與申請時註冊的域名是相互關聯的,其他域名用戶是無法使用的。同時Google 地圖 API註冊頁面也指出了一些注意事項:


點擊或登陸官方頁面查看

  
  下面我們可以先使用「密鑰生成頁面」中的簡單Google地圖 HTML代碼創建到http://www.wangziyi.com/google 下的index.html中進行測試。


基本地圖代碼

  這裡要說明的是,代碼中包含剛剛生成的密鑰。


代碼複製到記事本中保存為index.html或index.htm文件

  接著利用FTP上傳到http://www.wangziyi.com的google文件夾中


上傳到google目錄

 隨後就可以訪問http://www.wangziyi.com/google 目錄查看是否可以正常顯示。

測試可以正常顯示地圖

  到此,已經可以成功使用Google 地圖 API,剩下的就是繼續深造學習一些如「創建KML站點地圖」、「顯示Google衛星地圖」、以及「顯示谷歌中國地圖」等技巧。受於篇幅限制,其他技巧將於近期發佈,敬請關注中關村在線 GPS頻道。同時也歡迎更多的網友通過留言或郵件與筆者交流、探討Google Maps API相關技術,共同進步!
返回列表