ionic cleanse google map app - google-maps

Question

I am having problems with a map of google play. In the first instance the entire load properly, but the second map is not loaded. I thought that this would be solved some methods but nothing. I have taken this to clear the map.
var map = document.getElementById("mapa_ubicacion");
google.maps.event.trigger(map, 'resize');
This map is loaded each time the person takes a picture with the camera of the mobile device is why many times you could occupy.
$scope.cargarUbicacion = function () {
var posOptions = {timeout: 10000, enableHighAccuracy: false};
$cordovaGeolocation
.getCurrentPosition(posOptions)
.then(function (position) {
var latitud_actual = position.coords.latitude
var longitud_actual = position.coords.longitude
var mapOptions = {
center: new google.maps.LatLng(latitud_actual, longitud_actual),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
$scope.setMarker(map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');
}, function(err) {
// error
});
var watchOptions = {
frequency : 1000,
timeout : 3000,
enableHighAccuracy: false // may cause errors if true
};
var watch = $cordovaGeolocation.watchPosition(watchOptions);
watch.then(
null,
function(err) {
// error
},
function(position) {
var latitud_actual = position.coords.latitude
var longitud_actual = position.coords.longitude
var mapOptions = {
center: new google.maps.LatLng(latitud_actual, longitud_actual),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
$scope.setMarker(map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');
});
watch.clearWatch();
}

Answer 1

Try to create a single map instance in an initial function in your controller and add the map object to the scope. Then only update the map location in your methods. This helped me to solve a similar problem.
$scope.init = function() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
$scope.map = map;
}
$scope.init();
})
In your methods do the following:
//set map center with your coords on $scope.map
$scope.setMarker($scope.map, new google.maps.LatLng(latitud_actual, longitud_actual), 'Yo', '');