注意，前述的小小示範，在jsfiddle與codepen上可以看到正確呈現效果，是因為jsfiddle與codepen都支援External Resources引用，你可以看到前述示範引用了4個External Resources，而那些正好是套用Materialize CSS的必要資源。而這些資源中，Material Icons與jQuery分別引用自Google與jQuery的原網址，但Materialize CSS則是引用自CDNJS平台上的版本(因為CDNJS比Google CDN提供了更多的網頁前端程式庫)。
除了Materialize CSS官網的教學之外，也可以參考javaTpoint的Materialize CSS tutorial。另外，更快建構一個完整網站的方式就是搜尋看看有無Free Materialize CSS Template:
接下來的例子，是一個基於Google Maps的Draggable Markers進行逐步的功能強化設計，最後再加上Materialize CSS來讓整個版面更具專業感。
- 1.0版-標示三點 (jsfiddle) (jsbin) *使用三個Icons
這系列的第一個版本，只是在地圖放上三個標記，基本上就只是把Google Maps API官網上的Complex icons範例做一些小幅度改寫，看得懂官網範例就能看懂這個版本才對，所以就不在此詳細解說了，課堂上會把重點逐一介紹。 - 1.1版-監聽移點 (jsfiddle) (jsbin)
第二個版本，主要是處理標記的拖曳監聽事件，參考別人寫的Dragend listener範例，增加的程式碼在79~101行，而且這裡還特別提醒要將標記監聽事件獨立成一個函式執行，課堂上會仔細說明這樣設計的原因。 - 1.2版-加上路線 (jsfiddle) (jsbin)
第三個版本，再將Google Maps API官網上的Direction service範例融入一條路線串起三個標記，增加的程式碼在54~60行及111~138行，建議先把官網範例完全了解之後再來看這部分。 - 1.3版-拆兩路線 (jsfiddle) (jsbin)
第四個版本，主要是因為實際需要而拆成兩條路線，第一段以行車模式找出從大門口開車到停車場路線，第二段以行走模式找出從停車場走到目的地路線，這樣才能讓Google Maps API規劃出正確的路線。參考別人寫的Multiple routes範例，修改的程式碼在56~70行及121~148行，主要就是把directionsService與directionsDisplay宣告成陣列才能在地圖套上兩條路線。 - 2.0版-套用MCSS (jsbin) (codepen) (jsfiddle) *注意要引用4個External Resources喔
這個版本，把網頁的頂端與底端加上Materialize CSS的Navbar、Material icons、Table、Footer語法，增加的程式碼在4~16行、40~53行、59行、77~103行，整個版面的感覺立刻就變得蠻像樣的囉。 - 2.1版-更多MCSS (jsbin) (codepen) (jsfiddle) *注意要引用4個External Resources喔
這個版本，依實際需要而加上了Materialize CSS的Grid, Form, Cards, Buttons語法，整個功能版面大致底定。
- 1.0版-讀取KML (jsfiddle) (jsbin) (codepen)
基於安全理由，目前大部分瀏覽器(如Chrome)不允許網頁程式存取本機檔案，這樣的限制造成此程式無法直接在個人電腦上正常執行(因為要讀取另一個kml檔取得其資料)。但是此程式在jsfiddle、jsbin等平台上也無法正常執行，因為瀏覽器會限制讀取跨網域(cross domain)的xml檔。要測試這個程式，就必須先在自己的電腦上啟動Web Service，然後執行http://localhost/this.html，才能看到正確的執行結果，而自己的電腦上需要快速免安裝就能執行的Web Service，可以試試USBWebserver。
輸入的KML檔可以是Google My Maps繪製的圖資，譬如可以利用這個「中興大學校園RFID門禁大樓」匯出KML檔來實驗。整個程式主架構，參考Retrieve XML file範例而設計的，在套用自訂的KML之前，建議先在自己的電腦上執行一次未改寫的Retrieve XML file範例且記得下載該範例的XML file來用，可正確執行再動手改寫自己的版本。 - 1.1版-座標格式 (jsfiddle) (jsbin) (codepen)
原來的一串座標值(字串)要變更就靠String replace() Method，轉換成Google Maps Polygon之用 。 - 1.2版-座標彙整 (jsfiddle) (jsbin) (codepen)
資料彙整成整個陣列可用在Google Maps Polygon。 - P.0版-畫多邊形 (jsfiddle) (jsbin) (codepen)
基本上就只是把Google Maps API官網上的Simple Polygon範例做一些小幅度改寫，看得懂官網範例就能看懂這個版本才對，所以就不在此詳細解說了，課堂上會把重點逐一介紹。 - P.1版-眾多邊形 (jsfiddle) (jsbin) (codepen)
座標陣列改成二維陣列，套用資料來自於1.2版的全部座標彙整，並增加一個陣列記錄全部建物名稱。 - P.2版-套用MCSS (jsbin) (codepen) (jsfiddle) *注意要引用4個External Resources喔
這個版本，把網頁的頂端與底端加上Materialize CSS的Navbar, Material icons, Footer, SideNav, Cards語法。
