I’m having this problem and i do not understand why it happens. When the user enters a view camera device immediately opens. He takes a photo and your latitude and longitude then upload a map is recognized. This works but half-load strangely map and does not look good. I do not understand what I’m doing wrong. I leave you my code in the browser since all good works, is the device that fails. If I do not run the camera and if the map from the beginning this works fine, what I need is to load the map AFTER taking the picture and not before and this is what causes the problem.
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var latitud_actual = position.coords.latitude
var longitud_actual = position.coords.longitude
$scope.latitud = latitud_actual;
$scope.longitud = longitud_actual;
}, function(err) {
// error
});
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.lastPhoto = imageURI;
$scope.mostrar_form = true;
}, function(err) {
console.err(err);
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
saveToPhotoAlbum: false
});
};
View :
<div ng-show="mostrar_form" class="ng-hide">
<div style="width:100%;height:200px;">
<map center="{{latitud}}, {{longitud}}" zoom="15" style="width:100%;height:100%;">
<marker position="{{latitud}}, {{longitud}}" />
</map>
</div>
As you can see the map is cut and it is not possible to navigate in.