Google Static Maps地圖是用在取得地圖資訊時, 最輕量的使用方式, 之前文章: https://diary.tw/archives/1503 使用的 Google Maps Javascript API 需要引入 javascript library 進行程式操作, 在 Google Static Maps 則僅需要用到 img src 的方式取得圖片即可.
雖然只有圖片, 但是功能還是很強大, 而且應用在低階或網路環境不好的地方特別有用, 尤其是和地圖不互動的狀況下, 只是呈現結果的應用情境, 使用 Google Static Maps 是非常方便好用的.
Google Static Maps 資料可以參考官方網站:
https://developers.google.com/maps/documentation/static-maps/intro
記得一樣要先申請 Google API Key 來使用, 這裡用的就是 Google Static Maps API:
取得 API Key 之後, 就可以來應用了. 基本型如下:
https://maps.googleapis.com/maps/api/staticmap?parameters
其中 parameters 就是要繪製地圖的參數了, 以在地圖上某一地點畫一個座標為例,
https://maps.googleapis.com/maps/api/staticmap?center=25.052019,121.513987&zoom=15&size=320×240&language=zh-TW&maptype=roadmap&markers=color:red|label:A|25.052019,121.513987&key=[your api key]
其中 center 為地圖中心點, zoom 為放大層級, 以台北市為例, 15級或16級都OK, 看應用的狀況, size 為產出的圖片尺寸, 而 language 為地圖的語系, maptype 為地圖的格式, roadmap 為街道地圖(另有 satellite, terrain, hybrid), markers 為要標註的位置, 其中 color 為顏色, 用 | (pipe符號)區隔 marker 的參數, label 為單英數字標籤, 最後則是位置, 再來是最重要的 key 就是要輸入你的 api key, 效果如下:
這個地圖不能互動, 不過可以呈現所需要的資訊, 十分方便, 另外若是希望自訂 marker 的 icon, 可以將 markers 參數改為 icon:[url]|[position]的方式即可, 如下:
markers=icon:http://maps.google.com/mapfiles/kml/shapes/schools_maps.png|25.052019,121.513987
以上圖放到地圖中的效果如下:
另外, 若是想要畫出區域圖, 也可以用這個 Google Static Maps, 以之前文章 (https://diary.tw/archives/1503)為例, 座標點如下:
{lat: 25.0416515, lng:121.5437222},
{lat: 25.0333111, lng:121.543529},
{lat: 25.033116700000004, lng:121.5526271},
{lat: 25.036052399999996, lng:121.55267000000002},
{lat: 25.0374716, lng:121.55146840000002},
{lat: 25.038016, lng:121.5513396},
{lat: 25.0415348, lng:121.5474987},
{lat: 25.0416515, lng:121.5437222}
使用的參數就是 path, 語法如下,
path=pathStyles|pathLocation1|pathLocation2|… etc.
其中 pathStyles 有 wight, color, fillcolor, geodesic 4種參數, 其中 color 與 fillcolor 都是用 0xRRGGBBAA 其中 AA 由 00(不透明)到 FF(全透明) 這樣設定即可.
可以參考: https://developers.google.com/maps/documentation/static-maps/intro#Paths
產生的結果如下:
程式碼如下:
https://maps.googleapis.com/maps/api/staticmap?center=25.037789,121.547375&zoom=15&size=360×360&language=zh-TW&maptype=roadmap&path=color:0xFF0000|fillcolor:0xFF000033|25.0416515,121.5437222|25.0333111,121.543529|25.033116700000004,121.5526271|25.036052399999996,121.55267000000002|25.0374716,121.55146840000002|25.038016,121.5513396|25.0415348,121.5474987|25.0416515,121.5437222&key=[your api key]
十分好用, 但要注意不要超過 url 網址的長度上限, 參考舊文: https://diary.tw/archives/455, 在文件內說明也有, 不要超過 2048bytes: https://developers.google.com/maps/documentation/static-maps/intro#url-size-restriction
另外, 這組 API 每日免費上限為 25,000, 若要更多可以付費方式使用.
[2016/4/20 10:15]
補充一下自訂 marker 的部分, 必須是用 http 而非 https 的方式, 否則將無法正常輸出該自訂 marker, 參考資料:
http://stackoverflow.com/questions/12324996/custom-marker-icon-not-showing-google-static-maps-v2
當然網站也就可以正常使用了. 快來把推薦購物商品再放回去吧.
上圖的左邊是都還沒有 focus 時, 右邊則是 pink button 在 chrome 瀏覽器下的 focus 狀態, 會出現藍框. 範例連結: 