Selamat pagi/siang/sore mastah.
Ane lagi buat tugas ttg android pke framework phonegap, niat ane mau buat aplikasi yang bisa nampilin posisi ane sekarang sama lokasi yang dituju pke google map, cuman ane dapet kesulitan nih. Pas coding HTMLnya dirunning via browser bisa muncul
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<scri_pt src="jquery-1.8.2.min.js"></scri_pt>
<scri_pt src="jquery.mobile-1.3.2.min.js"></scri_pt>
<scri_pt type="text/javascri_pt" src="http://maps.google.com/maps/api/js?v=2&sensor=false&language=en"></scri_pt>
<scri_pt type="text/javascri_pt">
var map,
currentPosition,
directionsDisplay,
directionsService;
function initialize(lat, lon)
{
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
currentPosition = new google.maps.LatLng(lat, lon);
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: currentPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var currentPositionMarker = new google.maps.Marker({
position: currentPosition,
map: map,
title: "Current position"
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(currentPositionMarker, 'click', function() {
infowindow.setContent("Current position: latitude: " + lat +" longitude: " + lon);
infowindow.open(map, currentPositionMarker);
});
}
function locError(error) {
// initialize map with a static predefined latitude, longitude
initialize(59.3426606750, 18.0736160278);
}
function locSuccess(position) {
initialize(position.coords.latitude, position.coords.longitude);
}
function calculateRoute() {
var targetDestination = $("#target-dest").val();
if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
var request = {
origin:currentPosition,
destination:targetDestination,
travelMode: google.maps.DirectionsTravelMode["DRIVING"]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setPanel(document.getElementById("directions"));
directionsDisplay.setDirections(response);
/*
var myRoute = response.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
alert(myRoute.steps[i].instructions);
}
*/
$("#results").show();
}
else {
$("#results").hide();
}
});
}
else {
$("#results").hide();
}
}
$(document).live("pagebeforeshow", "#map_page", function() {
navigator.geolocation.getCurrentPosition(locSuccess, locError);
});
$(document).on('click', '#tampilkan-rute', function(e){
e.preventDefault();
calculateRoute();
});
</scri_pt>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow;">
<div id="map_canvas" style="height:400px;"></div>
</div>
<div data-role="fieldcontain">
<input type="text" name="target-dest" id="target-dest" value="-6.182778, 106.834444" />
</div>
<a href="#" id="tampilkan-rute" data-role="button" data-inline="true" data-mini="true">Tampilkan Rute</a>
<div id="results" style="display:none;">
<div id="directions"></div>
</div>
</div>
</div>
</body>
</html>
matabelo
