[Google Code]Static Maps API

去年底 Google 推出了 Chart API,讓大家可以使用網址來畫圖表,現在 :Gmaps: 也不惶多讓,推出靜態(圖片)式地圖 Static Maps API,讓網友們使用網址就可以畫地圖囉!

Google 的 Static Maps,如果有在使用 Google 的人應該不陌生,它會出現在一般網路搜尋及地圖搜尋中(當 javascript disable 狀態時),但是把這功能與眾多鄉民分享,我想也只有那麼有錢的 G 大神辦的到。

以下圖為例,藍色的標記是 101 大樓,綠色的標記是我最常拍攝 101 的點。


雖然 :Gmaps: 已提供崁入地圖的功能,但是使用 iframe 插入一個很消耗資源的網頁,是很多人在使用 Google Maps 置入自己網頁的痛,現在出了 Static Maps 功能,或許沒有直接崁入一個地圖方便,但是相當輕巧靜 Static Maps 應該會受歡迎

那…要怎麼使用 Static Maps API 呢?

使用 Static Maps API 前要先申請 Google Maps API Key,如果有了就不用再申請囉!

依據目前文件說明,Static Maps API目前有下列幾個參數…

  • center

    圖片的中心定位點(經度,緯度),本參數不寫時,地圖繪依據標記的佈局計算中心點。

  • zoom

    地圖縮放大小,依照 Google Maps 經驗應該是可以設成 1~18,但是各地圖資不一,所以放太大也許會沒東西喔!
    本參數不填,Google 會依據標計選出最適合的地圖比例大小。

  • size

    圖片大小(寬x高)

  • maptype

    地圖格式,分為網路(roadmap)與行動裝置(mobile),Google 會依據參數產出不同格式的地圖(圖例:網路行動裝置;注意到了嗎?Google 貼心的依據不同裝置的情況下視覺上的差異,修正了 Google Maps …果然是神啊~)。

  • markers

    地圖標記,可以設n個參數用法(經度,緯度,顏色文字),使用 “|” 符號做分格,可設red,green,blue三個顏色,顏色後直接英文字母(大寫),該標記就會現是英文字,否則為一般標記。

  • key

    Google Maps API Key

以下就是上圖的URL參數解析:

http://maps.google.com/staticmap?
center=
&zoom=14
&size=500x400
&maptype=roadmap
&markers=
25.03345693906047,121.56445026397705,blue
|
25.03345693906047,121.53355121612549,green
|
25.032970889180913,121.55951499938965,green
|
25.03849230249491,121.55818462371826,green
&key=你的API Key

網路圖例:

行動裝置圖例:

後記:

不知道怎麼找到經緯度嘛?可以試試這個喔!

19 comments for “[Google Code]Static Maps API

  1. 回風落雁劍
    2008 二月 24 日 at 上午 3:53

    很詳細溜!推推推!(y)

  2. 2008 二月 24 日 at 上午 8:42

    讚!我好久沒去研究 Google Map 囉!

  3. 2008 二月 24 日 at 下午 12:43

    @回風落雁劍:
    社長,謝謝啦!

    @jerome::
    哈~也沒什麼研究啦…只是剛剛好看到官網發佈…所以就就看一下…

  4. yuan
    2008 二月 25 日 at 下午 1:19

    試了一下,地圖好像不能直接進到Flash , 會得到「URLNotFound」的結果。

  5. 2008 二月 25 日 at 下午 2:25

    @yuan:
    剛剛有用 flash 試了一下,發覺果然不能連到圖片…
    果然出現以下錯誤:
    > errorCode: URLNotFound
    > httpStatus: 400
    看來 Google 有做某些防護措施…
    可能要用地三方程式來產生圖檔,經你這麼一說 Static Maps 用在 Flash 應該會有不錯的火花… 🙂

  6. d
    2009 二月 23 日 at 上午 12:15

    另有Maps API for Flash

  7. 2009 二月 27 日 at 下午 12:15

    @d:
    是阿!有 Maps API for Flash,這要 Flash 高手才會用。

  8. IAN
    2009 九月 8 日 at 下午 5:03

    天天大大你好

    想要請教一下
    如果 想要在 標的點上面 在加上文字
    例如說 我要再101的那個點旁邊顯示101
    這樣會有辦法嘛
    謝謝你

  9. 2009 九月 8 日 at 下午 8:52

    @IAN,
    目前圖標僅能標是顏色以及代號(A~Z)而已喔!

  10. IAN
    2009 九月 9 日 at 下午 2:28

    嗯嗯 謝謝大大嚕

    那麼 可以 在上線標記路線嘛

    假如我想要標記自行車河濱的腳踏車道

    有辦法嘛 還是說 只能標點而已

    謝謝

  11. 2009 九月 11 日 at 上午 11:55

    @IAN,
    靜態的地圖目前沒看到開放劃線(劃線的難度也很高)。
    你可以使用 My Maps 做你想要的應用,再發佈成 iframe 嵌在網頁中。

  12. IAN
    2009 九月 14 日 at 下午 3:37

    我有想過要用MY MAPSㄉ功能去做
    但是 因為我是要放在手機上面顯示的
    MY MAPS 在我寫的程式跑不出來

    所以才換成現在用圖片顯示地圖的方式

    有點麻煩 還是請問你知道手機上 如何顯示一般電腦使用的地圖嘛

    謝謝

  13. 2009 九月 15 日 at 上午 12:30

    @IAN,
    行動裝置方面較不熟,抱歉囉!

  14. IAN
    2009 九月 28 日 at 下午 1:07

    不好意思喔 又來打擾
    請問一下 你說 要標英文字母
    直接在後面標(大寫)
    請問是這樣嘛
    25.03345693906047,121.56445026397705,blueF|
    這樣子就可以了嗎
    還是有另外的寫法
    謝謝大大!!!

  15. 2009 十月 2 日 at 上午 12:56

    @IAN,
    他有一定的格式啊!就是這樣寫而已…. 😀

  16. IAN
    2009 十月 5 日 at 上午 2:18

    不好意思 可是我測試
    但是很像不行顯示耶

    下面是我測試的網址
    http://maps.google.com/staticmap?center=&zoom=14&size=500×400&maptype=roadmap&markers=25.03345693906047,121.56445026397705,blueA|
    25.03849230249491,121.55818462371826,green&key=
    我的API KEY

    不好意思 可以麻煩幫我看看是哪裡錯誤了嘛 謝謝

  17. 2009 十月 7 日 at 上午 2:31

    @IAN,
    我的測試是 OK 的喔!
    注意大小寫,應該全都是小寫。

  18. IAN
    2009 十月 7 日 at 下午 4:38

    哈哈 謝謝大大

    我成功了 感謝你的幫忙!!

發表迴響