CODEWITHSUNDEEP
cordovageolocation
user2138124
user2138124

Reputation: 11

phonegap camera and geolocation not working together in android

Pls, I'm developing an android app that makes use of phonegap camera and geolocation. Thus far I can capture picture but once I include the code that should enable for getting geolocation, the capture fails and geolocation cannot appear. Pls below is the failed code:

<!DOCTYPE html>
<html>
<head>
<title>Submit form</title>

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

var pictureSource;   // picture source
var destinationType; // sets the format of returned value

// Wait for device API libraries to load
//
document.addEventListener("deviceready",onDeviceReady,false);

  // device APIs are available
  //
  function onDeviceReady() {
    pictureSource = navigator.camera.PictureSourceType;
    destinationType = navigator.camera.DestinationType;
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }

// A button will call this function
  //
  function getPhoto() {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.FILE_URI });
  }

 function onSuccess(position) {
    var element = document.getElementById('geolocation');
    element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
                        'Longitude: '+ position.coords.longitude + '<br />' +
                        'Altitude: ' + position.coords.altitude + '<br />' +
                        'Accuracy: ' + position.coords.accuracy + '<br />' +
                        'Timestamp: ' + position.timestamp + '<br />';
  }


  // Called when a photo is successfully retrieved
  //
  function onPhotoURISuccess(imageURI) {

    // Show the selected image
    var smallImage = document.getElementById('smallImage');
    smallImage.style.display = 'block';
    smallImage.src = imageURI;
  }

  function uploadPhoto() {

    //selected photo URI is in the src attribute (we set this on getPhoto)
    var imageURI = document.getElementById('smallImage').getAttribute("src");
    if (!imageURI) {
        alert('Please select an image first.');
        return;
    }

    //set upload options
    var options = new FileUploadOptions();
    options.fileKey = "file";
    options.fileName = imageURI.substr(imageURI.lastIndexOf('/')+1);
    options.mimeType = "image/jpeg";
    options.chunkedMode = false;

    options.params = {
        firstname: document.getElementById("firstname").value,
        lastname: document.getElementById("lastname").value

    }


    options.headers = {
      Connection: "close"
    };

    var ft = new FileTransfer();
    ft.upload(imageURI, encodeURI("http://mydomain.com/upload.php"),win,fail,options);
}

// Called if something bad happens.
//
function onFail(message) {
  console.log('Failed because: ' + message);
}

function win(r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    alert("Response =" + r.response);
    console.log("Sent = " + r.bytesSent);
}

function fail(error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

</script>
</head>
<body>

    <button onclick="getPhoto();">Select Photo:</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /><br>
    <p id="geolocation">Finding geolocation...</p><br>

<form id="regform">
    First Name: <input type="text" id="firstname" name="firstname"><br>
    Last Name: <input type="text" id="lastname" name="lastname"><br>

    <input type="button" id="btnSubmit" value="Submit" onclick="uploadPhoto();">
</form>
</body>
</html>

Thanks for your anticipated help.

Upvotes: 1

Views: 805

Answers (1)

Dawson Loudon
Dawson Loudon

Reputation: 6029

You need to add a function that is called after the document loads, before adding the event listener.

Example:

<body onload="onLoad()">

Then:

function onLoad() {
    document.addEventListener("deviceready",onDeviceReady,false);
}

The reason for this is that you are calling the geolocation API as soon as the event fires, but the event can fire before the html element needed to write the data to.

If you wait for the body to load first, then there will never be a case where the JS can't interact with the html.

Upvotes: 1

Related Questions