光是從Google Maps JavaScript API官網上的既有範例程式，很多只要小小改寫就能進一步發展蠻實用的功能，大家應該常常去逛逛看看的！(免費使用每天上限25,000次地圖)
首先，最簡單的招式連Google Maps API都還不必搞懂，最快的做法就能「透過簡單的 HTML 為您的網站加入 Google 地圖功能」，只要設定超連結到http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=經緯度座標或地址&z=比例&t=h衛星圖或p地形圖&output=embed(如果要嵌入iframe的話)，就能開啟新網頁(或手機上開啟地圖App)來標示目標位置。只要會用這一招，而且你有整個校園建築物座標，你們也可以很快做出一個校園導覽地圖。更進一步要做導航的話，就是 http://maps.google.com.tw/maps?saddr=起點經緯度座標或地址&daddr=終點經緯度座標或地址。建議這裡可以做個練習利用Open Data做地點清單呈現並可開啟地圖導航到各地點，譬如中興大學校園大樓座標的資料已經建立在此https://docs.google.com/spreadsheets/d/1c8csSLxxQwEruOCT1TxyxgBk5v72tTMErvUEYoSGf2s/pubhtml，大家可用先前教過的Google Spreadsheet程式技術好好利用這些資料很快做出校園導覽啊!
在還沒正式進入使用Google Maps之前，有些應用其實只需要用到「Google Static Maps API」即可，以 https://maps.googleapis.com/maps/api/staticmap?center=經緯度座標或地址&zoom=層級&size=寬x高&maptype=roadmap&markers=color:顏色%7Clabel:英文字母%7C經緯度座標&markers=color:顏色%7Clabel:英文字母%7C經緯度座標&...，直接取得某個範圍的地圖影像檔，在APP開發時的某些應用情況這樣就夠用了。
如果只是要把Google Maps秀在網頁上，其實非常簡單，看看第一個「Hello, World」的說，重點程序就是將應用程式宣告為 HTML5、載入 Google Maps API、地圖 DOM 元素、地圖選項、地圖物件、載入地圖 (上課時用的比喻是：把new產生的地圖物件當作是一台新車，而需要有一個空的div當作停車格讓這台車停好，但因為後續還會在該地圖放上一些疊加層，所以需要用一個變數記住那台車停在地下室第幾號停車格，才能把氣球疊正確放在那台車子上，而不會疊放到別台車)，於是就能看懂「Simple Map範例 (備份在jsfiddle與jsbin)」了。
若是設計APP需要顯示Google Map出來，最常用的情況應該是要顯示目前所在位置(HTML5 Geolocation)，這就可以參考「Code Sample」的「Geolocation範例 (備份在jsfiddle與jsbin)」(若以Chrome開啟本機上的HTML將會因為其封鎖瀏覽時追蹤你的位置而顯示Error: The Geolocation service failed。那就試試放上Google雲端硬碟吧，然後以 https://googledrive.com/host/xxx/檔名.html 方式來瀏覽，應該就能呈現正確執行結果。)
上述Geolocation範例程式需要調整的可能是zoom層級吧，那就參考「地圖DOM元素」的說明就知道怎麼改囉。而如果想要將目前所在位置改成以氣球標示，就參考「在地圖上繪製 - 標記」的「Simple Markers範例 (備份在jsfiddle與jsbin)」。
把上述兩個範例的邏輯融會貫通後，就應該能寫出這個版本(jsfiddle) (jsbin)。更進一步，再加第二個氣球吧，變成這個版本(jsfiddle) (jsbin)。然後也繼續在「在地圖上繪製 - 標記」往下看建立動畫標記、自訂標記影像的範例，就能想像規劃以後要怎樣做相關的呈現了。
除了標記之外，「在地圖上繪製 - 資訊視窗」、「在地圖上繪製 - 形狀」、「在地圖上繪製 - 符號」都會是常用的標示技巧。
另外，如果想在Google Maps疊上古地圖或建築物平面圖，就要用到「在地圖上繪製 - 地面疊加層」的技巧，請看範例 (備份在jsfiddle與jsbin)」。若是要在地圖上繪製更多圖案，那就要用到「資料圖層」的技巧。若是要在地圖上引用從他處取得的KML做繪製，那就要用到「KML與GeoRSS圖層」的技巧。如果是大量資料要呈現在地圖上，就要用到「Fusion Table圖層」的技巧。而如果大量資料要能在地圖上呈現出熱區的視覺效果，就要用到「熱度圖圖層」的技巧。還有就是Google Maps其實是可以呈現即時動態的交通資訊，只要「路況、大眾運輸和單車圖層」有支援到的區域。而基於Google已有大量的地方資訊，所以在Google Maps API還有提供「地方資訊程式庫」，善用之就能在設計LBS服務時提供Google知道的各種地點類型資訊了。
接著，我們來看看「路線規劃」的「Directions Service範例 (備份在jsfiddle與jsbin)」：
- 先瞭解「顯示 DirectionsResult」的DirectionsRenderer物件、setMap()函式、setDirections()函式
- 再搞懂「DirectionsResult物件」的 legs[] 及其裡面的steps[i].instructions、steps[i].distance.value、steps[i].duration.value、start_location、end_location
- 那麼就能改寫範例把以上參數取得另外呈現出來像這個程式(jsfiddle) (jsbin)，只有在showSteps()裡面簡單加了兩處短短程式碼，並把地點改成高雄的景點座標，這就是我們開發黃色小鴨APP做導航功能頁面的雛形了，只要再加以美化資訊呈現版面設計就會是個好看又實用的功能了。
另外，我們也常常需要的一個功能是根據地址查出經緯度座標，要會這招就看「地理編碼」的「地理編碼回應範例 (備份在jsfiddle與jsbin)」：
- 而我們只要將範例稍微修改像這個程式(jsfiddle) (jsbin)，不要讓map佔滿整個頁面，好增加一個div讓results[0].geometry.location能顯示出來，就能確定此範例程式查出的經緯度座標了。
- 更進一步，如果我們打算是寫成不是讓使用者在頁面上輸入地址，而是直接接收自參數，然後就能傳回經緯度座標讓我們做後續利用，於是再改成這個版本(jsfiddle) (jsbin)，這就是純粹要有一個能以地址查出經緯度座標的函式雛形了，後續就看你要怎麼應用了。
- Google Maps Geocoding API文件上有提醒，地理編碼不但是費時且相當耗用資源的工作，請儘可能事先為已知地址進行地理編碼 ，並將結果儲存在您自己設計的暫存快取中。
更進一步要在地圖上做動態資訊呈現，就必須學會偵測地圖的變動狀態，也就是必須搞懂地圖可被偵測的事件，先在這個頁面上的地圖點點拖拖動動測試看看會被偵測到哪些事件囉。然後就可以開始練習下列事件偵測的程式：
- 要偵測 center_changed 事件，就先看這個 Retrieves the center position when the map moved例子，但在這個例子用滑鼠拖曳移動地圖時，注意看 InfoWindow 呈現的座標值其實在拖曳過程中是不斷改變的(拖曳時慢慢移動就能看到這個現象)，這代表拖曳過程中的 center_changed 事件是持續觸發。再看這個例子(jsfiddle) (jsbin)就更明顯能看到因為 center_changed 持續觸發疊一堆的氣球，但是這個例子卻只會在拖曳動作停下之後才在下方顯示一行目前中心點座標值，而這是以 dragend 觸發的，所以從這個例子就能知道，若只是需要在地圖移動完成後再疊上資訊的話，其實是應該偵測 dragend 事件。
- 要偵測 dragend 事件，
