I am trying to develop a hybrid application using jQuery mobile and phonegap , I want to implement a googlemap with geolocation support .for that I have done some coding but while running the app it is just giving me an ajax loader and it is not stopping, Can anybody help me to find the error .. I have tried some jQuery mobile demos but none of them worked properly . giving my code below
<!doctype html>
<html lang="en">
<head>
<title> Google maps </title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<style>
#content {
padding: 0;
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=true&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var mumbai = new google.maps.LatLng(19.075984,72.877656),
mobileDemo = { 'center': '19.075984,72.877656', 'zoom': 15 },
cityList = [
['Bank ATM CST Road', 19.075984,72.877656, 1],
['Bank ATM Air India Road', 19.078318,72.877024, 2],
['Bank ATM Lal Bahadur Sasthri Road', 19.069236,72.875278, 3]
];
function initialize()
{
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
//addMarkers();
getcurrentposition();
}
function addMarkers()
{
for (var i = 0; i < cityList.length; i++)
{
var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2],cityList[i][3]),title: cityList[i][0]});
$marker.click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
});
}
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
/* $(document).on('click', '.add-markers', function(e) {
e.preventDefault();
addMarkers();
}); */
function getcurrentposition()
{
$('#map_canvas').gmap('getCurrentPosition', function(position, status) {
if ( status === 'OK' ) {
var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$('#map_canvas').gmap('addMarker', {'position': clientPosition, 'bounds': true});
$('#map_canvas').gmap('addShape', 'Circle', {
'strokeWeight': 0,
'fillColor': "#008595",
'fillOpacity': 0.25,
'center': clientPosition,
'radius': 15,
'clickable': false
});
}
});
}
</script>
</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:500px"></div>
</div>
</div>
</div>
</body>
</html>
Logcat
04-04 04:53:07.952: D/CordovaLog(1665): Uncaught TypeError: Cannot call method 'apply' of undefined
04-04 04:53:07.952: I/chromium(1665): [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot call method 'apply' of undefined", source: file:///android_asset/www/my_current_location.html (1)
04-04 04:53:08.182: D/Cordova(1665): onPageFinished(file:///android_asset/www/my_current_location.html)
04-04 04:53:08.182: D/Cordova(1665): Trying to fire onNativeReady
04-04 04:53:08.202: D/DroidGap(1665): onMessage(onNativeReady,null)
04-04 04:53:08.202: D/DroidGap(1665): onMessage(onPageFinished,file:///android_asset/www/my_current_location.html)
Uncaught TypeError: Cannot call method 'apply' of undefined
is comming after your functiongetcurrentposition()
is started. So Dr.Molle is right.