客製化Google Map地圖標記 – js-rich-marker

 

此次要介紹的 Library js-rich-marker
是一個能直接嵌入客製化的 HTML 以及可以使用 CSS 進行樣式的修改,是一個在 Google Map Javascript API v3 也沒有開放的功能。Google Map 團隊把這個資源放在了 GitHub 上 googlemaps 的 repositories ,不只標記(Marker)的功能,還有許多 Javascript API v3 沒開放的功能都會在這邊,工作上有運用到 Google Map 功能的人一定要找時間翻過一遍。

原本地圖可提供的標記

簡單標記

簡單標記+標籤

簡單圖示 png

 

通常除了預設的簡單標記常使用外,另外就是使用 png 嵌入的圖示了,但嵌入 png 的方式圖片的大小並沒有辦法設定,圖片的方向也沒辦法設定, 以車輛顯示為例,今天車頭朝向東西南北,還是東北、西南、西北、東南方,在下圖顯示的車輛監控系統,就做了至少 8 張的圖來解決這個問題,如果再加上車子的速度狀態、連線狀態,就需要做出非常多的 png 圖來提升標記顯示的體驗。
那如果今天要做的是在地圖上顯示所有價格的訂房網站呢 ?

DOM 直接嵌入 Google Map 的解決方案

如何取得 apikey ,在網站上面使用 google map 網路上隨便都能找到教學在這邊就不再贅述。
只要再多引入一個 richmarker.js 就能直接使用。

在上方我的範例程式碼是為了要在地圖上能顯示所有線上使用者的頭像,因為沒辦法叫 server 指定給我圖片的大小,意外找到了這個方法,直接用 CSS 設定大小,想要方形、圓角、邊界、陰影都可以搞定。
有了 js-rich-marker 這個大絕招,沒有什麼標記的樣子是沒辦法實現的了。