Google maps centered load failure

Question

Well I'm having this problem, load the map once and everything works perfect. The second time or once update the map does not load ok, but not centered load when navigating on you can see the marks that are made but is deformed or simply lost.

I have tried several ways to solve this problem, first and most common I found was to use google.maps.event.trigger(map 'resize') but it did not work then and logic, try that whenever loading map is executed, create a new map, with the same data and focused but neither worked for me. It may be also the way I use the map. I am using the plugin of the camera in my application, the user takes a photo and this should detect where I draw the picture and display the map. Each time the view is opened, the plug of the camera, in the process of taking and show the picture is where I call the appropriate functions to load the map and this has me a bit tricky immediately loaded I have a good time locked in this problem, I found solutions serve me but only for the browser, the device does not work. I am using ionic framework and plugins cordova.

Controller :

.controller("CamaraCtrl", function($scope,$rootScope, Camera,$cordovaGeolocation,$state,$location,$ionicSideMenuDelegate) { 
  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;
          //$scope.map = new google.maps.Map(document.getElementById("mapa_ubicacion"), mapOptions);
  }, function(err) {
    // error
  });

  function initialize() {
var mapOptions = {
  center: new google.maps.LatLng($scope.latitud, $scope.longitud),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);
$scope.setMarker(map, new google.maps.LatLng($scope.latitud, $scope.longitud), 'Yo', '');
$scope.map = map;
}
$scope.setMarker = function(map, position, title, content) {
  var marker;
  var markerOptions = {
      position: position,
      map: map,
      title: title
  };

  marker = new google.maps.Marker(markerOptions);

  google.maps.event.addListener(marker, 'click', function () {
      // close window if not undefined
      if (infoWindow !== void 0) {
          infoWindow.close();
      }
      // create new window
      var infoWindowOptions = {
          content: content
      };
      infoWindow = new google.maps.InfoWindow(infoWindowOptions);
      infoWindow.open(map, marker);
  });
 }
 $scope.mostrar_form = false;
 $scope.mostrar_boton_view = false;
 $scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
  console.log(imageURI);
  $scope.lastPhoto = imageURI;
  $scope.mostrar_form = true;
  $scope.mostrar_boton_view = false;
  google.maps.event.addDomListener(window, 'load', initialize);  
  initialize();
}, function() {
  $scope.mostrar_boton_view = true;
}, {
  quality: 75,
  targetWidth: 320,
  targetHeight: 320,
  saveToPhotoAlbum: false
  });
 };
  $scope.getPhoto();
})

Answer 1

The only solution I found was to create a function that executes the map again. It should not be as optimal but at least it solved my problem.

$scope.centrar =  function(){
  var mapOptions = {
    center: new google.maps.LatLng($scope.latitud, $scope.longitud),
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              scrollwheel: false
   };
   var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);
   $scope.setMarker(map, new google.maps.LatLng($scope.latitud, $scope.longitud), 'Yo', '');
   $scope.map = map;
}