Sorry this is quite a but of code it is all relevant since I have no idea what the problem is, also the code may be too hard to read I tend to write first clean up later but hopefully someone will know what is happening. The problem is that I cannot call any of the functions from a button in html as they come out "undefined". I think it may be that they are somehow wrapped in the onDeviceReady() function so that they arent actually defined just an instance of them that disappears. But I cannot fix it no matter what I try.
<html>
<head>
<title>Geolocation</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<link href="retrieveCSS.css" rel="stylesheet" type="text/css" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
function onDeviceReady()
{
AppMobi.device.hideSplashScreen();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
</script>
<script type="text/javascript">
$(document).ready(function () {
var beachMarker;
var locations = new Array();
var _map = null;
var _seconds = 2;
var _llbounds = null;
function drawMap()
{
var url = "http://localhost/getloc.php";
var data;
var lat;
var lng;
var latlng = new google.maps.LatLng(currentLatitude,currentLongitude);
var rendererOptions =
{
draggable: true
};
var mapOptions =
{
zoom:14,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoomControl:false,
disableDefaultUI: true,
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
$.get(url, data, function (data)
{
for (var i = 0; i < data.length; i++)
{
locations[i] = data[i];
}
}, 'json')
.done(function() {
setMarkers();
});
_map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(_map);
}
var currentLatitude;
var currentLongitude;
var options = {
timeout: 1000,
maximumAge: 2000,
enableHighAccuracy: true
};
var suc = function(p)
{
if( _map == null )
{
currentLatitude = p.coords.latitude;
currentLongitude = p.coords.longitude;
drawMap();
}
var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
var status = AppMobi.cache.getCookie("statusCookie");
var name = AppMobi.cache.getCookie("usernameCookie");
var location = p.coords.latitude + ", " + p.coords.longitude;
var url = "http://localhost/pickmeup.php";
var data = 'name=' +name+'&location='+location+'&status='+status;
$.post(url, data, function (data)
{
});
var posting = $.post( url, {
name: name,
location: location,
status: status
});
if (status == "green")
{
curIcon = "greenicon.png";
}
else if (status == "yellow")
{
curIcon = "yellowicon.png";
}
else if (status == "red")
{
curIcon = "redicon.png";
}
var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16,32)
);
if (beachMarker != null)
{
beachMarker.setMap(null);
}
beachMarker = new google.maps.Marker({
position: myLatLng,
map: _map,
icon: curIcon
});
};
var fail = function()
{
console.log("Geolocation failed. \nPlease enable GPS in Settings.",1);
};
//AppMobi is ready to roll
function onDeviceReady()
{
try
{
if (AppMobi.device.platform.indexOf("Android")!=-1)
{
AppMobi.display.useViewport(480,480);
document.getElementById("map_canvas").style.width="480px";
}
else if (AppMobi.device.platform.indexOf("iOS")!=-1)
{
if (AppMobi.device.model.indexOf("iPhone")!=-1 || AppMobi.device.model.indexOf("iPod")!=-1)
{
AppMobi.display.useViewport(320,320);
}
else if (AppMobi.device.model.indexOf("iPad")!=-1)
{
AppMobi.display.useViewport(768,768);
document.getElementById("map_canvas").style.width="768px";
}
}
if (AppMobi.geolocation != null)
{
AppMobi.geolocation.watchPosition(suc,fail,options);
}
}
catch(e)
{
alert(e.message);
}
try
{
//lock orientation
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
}
catch(e) {}
try
{
//manage power
AppMobi.device.managePower(true,false);
}
catch(e) {}
try
{
//hide splash screen
AppMobi.device.hideSplashScreen();
}
catch(e) {}
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
function setMarkers() {
for (var i = 0; i < locations.length; i++) {
var locStatusString = locations[i].split("!",3);
var loc = locStatusString[0];
var status = locStatusString[1];
var user = locStatusString[2];
if (user != AppMobi.cache.getCookie("usernameCookie"))
{
var latlngStr= loc.split(",",2);
var lat = latlngStr[0];
var lng = latlngStr[1];
var markerLatLng = new google.maps.LatLng(lat,lng);
var curicon;
if (status == "green")
{
curIcon = "greenicon.png";
}
else if (status == "yellow")
{
curIcon = "yellowicon.png";
}
else if (status == "red")
{
curIcon = "redicon.png";
}
var image = new google.maps.MarkerImage(
'images/marker.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16,32)
);
var marker = new google.maps.Marker({
position: markerLatLng,
map: _map,
icon: curIcon
});
}
}
}
});
</script>
</head>
<body>
<div id="afui" class='ios'>
<div id="header"></div>
<div id="content" style="">
<div class="panel" title="Give A Ride" data-nav="nav_0" id="page_3" style="" data-appbuilder-object="page">
<button onclick = "drawMap()" type="button">Click Me!</button>
<div id="map_canvas" style="top: 20%;position:absolute; width:100%;height:80%;text- align:center;"></div>
</div>
</div>
</div>
</body>
</html>
Also sorry for the formatting this whole 4 space thing screwed up more than it already was.
