BASIC:
<!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html>Refhttps://developers.google.com/maps/documentation/javascript/tutorial#api_key
GET A KEY
Get a Key
=========
PROYEK PERDANA
Buat proyek baru di Intel XDK, kemudian pilih template HTML5 + Cordova dan beri nama proyeknya “CekLokasi” dan tentukan lokasi penyimpanan proyeknya sesuai dengan preferensi kamu. Jangan lupa untuk mencentang boks “Start with App Designer” untuk mempermudah desain pembuatan aplikasi.
Intel XDK akan secara otomatis membuat template koding untuk proyek aplikasinya agar kamu dapat langsung membuat aplikasi. Jika kamu sudah pernah membuat aplikasi HTML, pasti kamu akan merasa familiar dengan template koding yang dihasilkan karena Intel XDK memang menggunakan bahasa HTML5 untuk pembuatan aplikasinya.
Tahap pertama yang kamu lakukan adalah mengklik tab “Design” untuk memulai pembuatan tampilan aplikasi. Untuk sekarang kita cukup menggunakan tampilan yang sederhana saja. Ketika diminta untuk memilih framework tampilan aplikasi, pilih saja “jQuery Mobile“.
Seret komponen Footer di menu Layout ke tampilan aplikasi kamu. Selanjutnya Seret komponen “Button” ke “Footer” yang baru kamu buat dan setelah itu beri label “Cek Lokasi” di tombol yang kamu buat sebelumnya.
Selesai :) Itu saja langkah-langkah untuk pembuatan tampilan aplikasi menggunakan App Designer di Intel XDK. Sekarang kita akan masuk ke tahap pengkodingan aplikasi kita.
Pengimplementasian GPS dan Google Maps
Pada Intel XDK versi terbaru ini, kita akan menggunakan plugin Geolocation yang tersedia untuk aplikasi kita. Caranya mudah, pilih menu Project yang ada dipojok kiri atas kemudian pilih Plugin Management, kemudian tambahkan plugin Geolocation dengan memilih padaCordova Plugin Explorer.
Jika kamu belum memiliki Google API Key, dapatkan dulu Google API Key agar kamu dapat menggunakan Google Maps API. Untuk cara mendapatkan Google API Key dapat mengunjungi situs Google Developers. Setelah kamu memiliki Google API Key, masukkan kodingan di bawah ini di bagian head di index.html proyek kamu:
Ketiikan code sbb:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
/* following three (cascaded) are equivalent to above three meta viewport statements */
/* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
/* see http://dev.w3.org/csswg/css-device-adapt/ */
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
/*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO-TvTh1ayNlM2XiSyYcqhO81FxBDewJU&callback=initMap"></script>
</head>
<script>
var CekLokasi = function() {
document.addEventListener("deviceready", function(){
navigator.geolocation.getCurrentPosition(function(position) {
var mapProp = {
center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP};
var map=new google.maps.Map(document.getElementById("map-canvas"),
mapProp);
var marker=new google.maps.Marker( {
position:new google.maps.LatLng(position.coords.latitude,position.coords.longitude)});
marker.setMap(map);
},
function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking too long find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}, false);
}
</script>
<body>
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<div class="upage-content ac0 content-area vertical-col left"></div>
<div id="map-canvas" style="width:300px; height:300px;"></div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_1" data-uib="jquery_mobile/footer" data-ver="0">
<h1></h1>
<div class="widget-container wrapping-col single-centered"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" onclick="CekLokasi()">Cek Lokasi</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<style>
/* following three (cascaded) are equivalent to above three meta viewport statements */
/* see http://www.quirksmode.org/blog/archives/2014/05/html5_dev_conf.html */
/* see http://dev.w3.org/csswg/css-device-adapt/ */
@-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; } @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } @viewport { user-zoom: fixed ; min-zoom: 100% ; }
/*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; } @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO-TvTh1ayNlM2XiSyYcqhO81FxBDewJU&callback=initMap"></script>
</head>
<script>
var CekLokasi = function() {
document.addEventListener("deviceready", function(){
navigator.geolocation.getCurrentPosition(function(position) {
var mapProp = {
center:new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP};
var map=new google.maps.Map(document.getElementById("map-canvas"),
mapProp);
var marker=new google.maps.Marker( {
position:new google.maps.LatLng(position.coords.latitude,position.coords.longitude)});
marker.setMap(map);
},
function(error){
if(error.code == PositionError.PERMISSION_DENIED)
{
alert("App doesn't have permission to use GPS");
}
else if(error.code == PositionError.POSITION_UNAVAILABLE)
{
alert("No GPS device found");
}
else if(error.code == PositionError.TIMEOUT)
{
alert("Its taking too long find user location");
}
else
{
alert("An unknown error occured");
}
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
}, false);
}
</script>
<body>
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<div class="upage-content ac0 content-area vertical-col left"></div>
<div id="map-canvas" style="width:300px; height:300px;"></div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_1" data-uib="jquery_mobile/footer" data-ver="0">
<h1></h1>
<div class="widget-container wrapping-col single-centered"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" onclick="CekLokasi()">Cek Lokasi</a>
</div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar