2011年4月1日 星期五

在Blogger使用Google Map API

 

Blogger不虧是最有彈性的Blog系統

連API也能正常使用

這樣一來Blogger可以玩的變化又更多了~~~~~~

底下是Google Map API的示範

一開始底下並沒有載入任何地圖

當各位點選底下的火車站之後

就會出現該點附近的地圖:

 

台北火車站    新竹火車站

 

 

 

底下是Google Map API的簡易使用方法:

1. 首先進到Blogger的後台,點「設計/修改HTML」

image

 

2. 按Ctrl + F按鍵,搜尋「<body

3. 找到之後在其下一行輸入以下字串

其中key的值每個網站都不一樣,必須另外申請

image

 

4. 點選進入http://code.google.com/intl/zh-TW/apis/maps/signup.html申請 Google Maps API網頁

 

5. 如下圖,勾選「我已閱讀並同意條款及細則

並在「我的網站網址:」輸入您的Blog網站的網址,例如本網站就是amos-tsai.blogspot.com

最後點選「產生API金鑰

image

 

6. 複製下圖紅色位置的Key值

image

 

7. 在步驟3紅色底線「Key=」後面貼上自己網站專屬的key值

 

8. 接著,同步驟2的方法搜尋「<body>

找到後請更改為「<body onunload='GUnload()'>

確認無誤後點「儲存範本

9. 新增一篇新文章,確認目前在「修改HTML」編輯模式

貼上以下內容到文章中

image

結果如下圖 

 image

相關文章 :

3 意見:

timedied 提到...

不知道为什么我点那两个车站后什么都没有出现?其实前几天写日记的时候也想要在博客中插入地图呢!

阿莫 提到...

之前為了讓網站也能在舊IE的電腦正常呈現
所以刪掉一些東西
可能誤刪了吧
在找個時間補上去
謝謝啦^^;;

桃城美食 提到...

謝謝分享

張貼留言

Related Posts with Thumbnails
by TemplatesForYou-TFY
SoSuechtig