I'm playing around with steroids.js (from Appgyver) to try and utilise an iPhone's GPS and use the google maps API to plot it on a map. I have some methods in a app object which I call from various points in the html pages.
For each html page I am including 2 .js files. One is application.js (PASTEBIN) and the other is specific to that page. In this case the other .js file is walking.js (PASTEBIN). The html file I am in is walking.html (html file included below).
When running this html it works fine. The app runs and starts tracking using the GPS, plots the course on the map, and also starts a little counter.
So it starts off with;
app.start_walk();
in walking.js. That method calls another 2;
counter.start();
map.start_tracking();
From this point on everything is running and working fine. However when I hit the STOP button, which is binded to;
app.stop_walk();
which calls;
map.stop_tracking();
I get an error;
application.js:102 TypeError: 'undefinted' is not a function.
I can fumble my way around JS but don't really understand the ideas behind OOP. If anyone could give me some pointers that would be awesome! If you would like to see a working version of the app I could PM you a link to the Appgyver Scanner qr code.
Any help would be greatly appreciated. Cheers.
HTML file;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>My Steroids App</title>
<link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
<link rel="stylesheet" href="stylesheets/application.css" />
<script src="javascripts/onerror.js"></script>
<script src="javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/appgyver/cordova.js"></script>
<script src="components/steroids-js/steroids.js"></script>
<script src="javascripts/application.js"></script>
<script src="javascripts/walking.js"></script>
<!-- google maps -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA_aKt-ZwMPraZTALCiBEoTZuIoVdffBU0&sensor=true"></script>
</head>
<body id='walking'>
<header>
<div class='left-button people'></div>
<div class='title'><h2>New Walk</h2></div>
<div class='right-button gps-signal'></div>
</header>
<div class='details-map-slider page'>
<div class='slider'>
<!-- first page -->
<div class="content slide">
<!-- count down timer -->
<section class=''>
<h1>
<span class='minutes'>0</span>:
<span class='seconds'>00</span>
</h1>
<div><h5>TIME</h5></div>
</section>
<!-- walk details -->
<section class='bars inline-block pull-left'>
<div class='distance span6'>
<img src="">
<div>0 <h6>m</h6></div>
<div><h5>DISTANCE</h5></div>
</div>
<div class='divider'></div>
<div class='pace span6'>
<img src="">
<div>0 <h6>min/km</h6></div>
<div><h5>CURRENT PACE</h5></div>
</div>
</section>
</div> <!-- end first page -->
<!-- second page -->
<div class="content slide">
<!-- count down timer -->
<section class=''>
small timer
</section>
<section class=''>
small timer
</section>
<section id='googlemap' class=''>
<div id='canvas'></div>
<!-- <div class='drag-arrow'></div> -->
</section>
</div> <!-- end second page -->
</div>
</div>
<footer class='buttons'>
<div class='slidenation'></div>
<div class='inline-block'>
<button class='green stop'><h4>Stop</h4></button>
<button class='grey pause'><h4>Pause</h4></button>
</div>
</footer>
<!-- jquery -->
<script src="javascripts/jquery-1.8.2.min.js"></script>
<script src="javascripts/jquery.easing-1.3.js"></script>
<!-- page/map slider -->
<script src="javascripts/jquery.iosslider.min.js"></script>
</body>
</html>