什麼是 Google 地圖 API

Google 地圖 API」可讓您利用 JavaScript 將「Google 地圖」嵌入自己的網頁。此 API 透過多種服務提供一些公用程式,以操控地圖 (如同 http://maps.google.com 網頁上所示),並新增地圖內容,能讓您在網站上建立強大的地圖應用程式。

 

也就是說  你可以利用GOOGLE地圖的模組來在自己網頁上顯示各種不同的標示方法

例如  按下按鈕後  直接到 某個座標

GOOGLE地圖上顯示自己公司的資訊及照片

貼上自訂的圖示標示商店分布圖等等

相當多的功能可以讓你自己設定

而這一切都只需要JavaScript就可以了   

當然GOOGLE也很貼心的寫了很多範例   你可以參考他的寫法來改成自己要的表示方式

相當簡單不會寫程式也可以用唷~

 

 

那我們要使用這個API

首先要先為你的網站申請一個金鑰

這個地方申請,拉到最下面

I have read and agree with the terms and conditions勾起來

將你的網站網址貼到My web site URL:裡面

她是可以向下支援的

例如你的網域是http://test.ABC.com/

http://test.ABC.com/page1/ http://test.ABC.com/page2/

都是可以使用低

 

按下確定後

她就會給你一組長長一條很像亂碼的金鑰,像這樣

Your key is: 
ABQIAAAAg7ts_tlo3cTYNroqXGBCThS83-cXub6Htj8tD-r5AQYP1awDpRT4jOTRx
1GvRrHVU2zqkRn1_Dv_ww

 

請把它存下來

 

然後可以到這個頁面看他的範例

 

找到你想要使用的地圖模式後

你可以直接再那一個頁面看他的原始碼

然後把它的金鑰改成你剛剛申請的那一組

貼到你的網頁上面就可以了

像這樣

 

"-//W 3C //DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

"http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

 

    "content-type" content="text/html; charset=utf-8"/>

    Google Maps JavaScript API Example: Simple Map

   

   

 

 

  "initialize()" onunload="GUnload()">

   

"map_canvas" style="width: 500px; height: 300px">

 

紅色部分就是金鑰

 

內容很單純,應該一看就知道哪裡可以改參數(座標、圖示、階層等等)

自己研究一下吧

 

另外這裡有一個很方便的測試區Code Playground

讓你可以直接改程式碼後看效果

也是相當方便

 

成果就像這樣

arrow
arrow
    全站熱搜

    嘎抓強 發表在 痞客邦 留言(0) 人氣()