本節書摘來自異步社群《phonegap移動應用開發手冊》一書中的第1章，第1.7節根據位置坐标檢索地圖資料，作者 【英】matt gifford，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
1.7 根據位置坐标檢索地圖資料
phonegap移動應用開發手冊
本節基于裝置位置傳感器傳回的經緯度坐标，使用google maps api作為javescript，講述如何在螢幕上繪制地圖，及生成地圖位置标簽。
準備工作
編碼之前，先行搭建環境、擷取google maps服務的通路權限。
（2）從左邊菜單中選擇services選項，并激活google maps api v3 service。
（3）一旦服務激活，在api access頁面中就會生成使用者的api key。在該頁simple api access章節就會發現該key，效果如圖1.9所示。
（4）現在可以開始我們的例子了。
實作步驟
使用裝置的gps功能擷取位置坐标、建立并初始化地圖、顯示目前位置的标記。
（1）為頁面建立基本的html架構。
（2）在head标簽中添加google maps api需要的javascript。将api key加入腳本中src屬性的查詢字元串中。
（3）接下來，添加對cordova-2.0.o.js的引用，并建立另一個javascript标簽塊，以存放自定義代碼。
（5）下一步，建立onsuccess函數，通路position對象傳回的位置資訊。
（6）根據從裝置位置傳感器擷取到的latitude和longitude資訊，建立latlng對象，在元件初始化時将其傳入map對象。
（7）設定map選項，将設定的latllng變量的值作為地圖的中心。google map控件在轉換到移動裝置螢幕上時可能會出現異常，尤其在可用性方面。使用者可以自定義需要使用的控件。本例中使用zoomcontrol控件而不使用pancontrol控件。
（8）為定義map對象，需引用一個div元素，并傳遞給之前定義的mapoptions變量。
（9）為關閉該方法，下面建立marker變量顯示latlng對象表示的精确位置。
（10）為確定對傳回的錯誤都能正确處理，下面建立onerror方法，它将根據div元素内的錯誤碼顯示對應的字元串消息。
（11）在body标簽中導入顯示地圖的div元素。
實作原理
多虧開放的繪制服務，比如google maps，才能從裝置擷取位置更新，并利用傳回的資料，建立豐富的、可互動的、可視化地圖應用程式。
本例中，使用裝置的坐标作為map的中心位置，并且在地圖上建立marker置于标簽之上，易于可視化。
這類地圖服務的可用api相當豐富，其中的資訊非常詳細，并包括許多函數及方法可以幫助開發者實作基于位置的工具和應用程式。一些服務限制對api的需求數目，是以編寫程式的時候一定要注意相關限制。
相關内容
本例中使用goole maps api作為javascript。google提供的api有許多不同的層次。也可以通路其他地圖繪制系統，諸如mapquest、multimap和yahoo! maps提供者。讀者可以嘗試使用這些不同的服務，并通過實驗從中挑出最适合自己的解決方案。
靜态地圖
本例所使用的是動态google map api。這樣做是為了可以使用zoom控件，并且使得使用者能在最終應用中拖拉地圖。
讀者同樣可以選用google static map服務，該服務生成地圖的代碼相對簡單，将會傳回位置的靜态圖檔。
讀者可以在該服務中選擇使用api key。此後仍然可以和本例開始時啟用api access的方式一樣來啟用api。
思考下面的代碼，其是對onsuccess函數的一個修訂，擷取到位置資訊後将會運作。
從中可以看到，通過運用static maps api，此處僅僅使用了一個圖像資源，将坐标、圖像大小及其他資料作為參數，比之前代碼中建立坐标、地圖及标簽的操作要簡單得多。
雖然使用static map api會使得程式失去使用者對動态地圖的互動性，然而整個服務會變得簡單許多，要求的代碼量也會大量減少