intelXDK 使用tinyMap 取得 Google Map API
Author: Willie
----------
近來利用intel XDK 開發Cross Platform 的APP, 好處就不用多說了, 以下是我利用 tinyMap 的應用實例：
在Header中引入Google API及tinyMap, 其中在底下[You API Key], [Your Path]分別輸入API KEY及你的tinyMap的路徑。
<!-- Google Map API-->
<script src="http://maps.googleapis.com/maps/api/js?key=[Your API Key];sensor=TRUE" type="text/javascript"></script>
<!-- TinyMap -->
<script src="[Your Path]/jQuery-tinyMap-master/jquery.tinyMap.min.js" type="application/javascript"></script>
在js/index_user_scripts.js 裡面註冊你的按鈕的Event呼叫loadMap()這個function，以下述的註冊方式只要css屬性中有cust-loadmap就會執行loadMap。
function register_event_handlers()
{
$(document).on("click", ".cust-loadmap", function(evt)
{
loadMap();
});
}
$(document).ready(register_event_handlers);
})();
在js/app.js裡面寫入這段loadMap的Code。
// Geolocation using TinyMap API
// $("#divMyMap")請使用自行命名的DIV物件
function loadMap(){
$('#divMyMap').tinyMap('panto', '台南市新化區和平街53號');
$('#divMyMap').tinyMap({
zoom:14,
center:'台南市新化區和平街53號',
//以用戶目前位置為中心
autoLocation:false,
marker: [
{
addr: '台南市新化區和平街53號',
text: '武德殿 06-xxxxxxx',
label: '武德殿'
},
{
addr: '台南縣新化鎮中正路127巷35號',
text: '瓜瓜園 06-xxxxxxx',
label: '瓜瓜園'
}
]
});
}
如此, 即可在按下按鈕時就產生MAP, 但要在按鈕轉到你要的頁面，這樣還是不夠，請在你的ICON上面設定如下，加入指定的頁面，以我的實例為主是利轉到為#page_map，這個部份就請依你的狀況來作調整。
在這裡面你可以注意到我利用app framework的data-load屬性來呼叫loadMap，另外，我的地圖使用的DIV (divMyMap) 也是在這個指定。
