ionic not rendering google maps on first load

Question

I have an app that is a welcome/sign in screen and after you sign it you are taken to a tab screen with four tabs in it, the first tab of which shows a google map.

Upon first sign in the page does not display it's self but upon refresh of the page the map show's up gracefully as it was expected to do the first time. This happens EVERY time but I only get one javascript error.

error

Uncaught Error: can't load XRegExp twice in the same frame(anonymous function) @ xregexp-min.js:2

code

function initialize() {
  var mapOptions = {
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(
    document.getElementById("map"),
    mapOptions
  );
  var geocoder = new google.maps.Geocoder();

  $scope.map = map;
  $scope.centerOnMe();
}
google.maps.event.addDomListener(window, 'load', initialize);

$scope.centerOnMe = function() {
  if(!$scope.map) {
    return;
  }

  $scope.loading = $ionicLoading.show({
    content: 'Getting current location...',
    showBackdrop: false
  });

  // get user location
  $cordovaGeolocation
  .getCurrentPosition({
    timeout:10000,
    enableHighAccuracy:true
  })
  .then(function(position) {
    $ionicLoading.hide();
    // we found the position
    $scope.map.setCenter(
      new google.maps.LatLng(
        position.coords.latitude, 
        position.coords.longitude
      )
    );
  }, function(e) {
    $ionicLoading.hide();
    console.log(e);
    alert("Uh oh, we can't find your position! Is your GPS enabled?\n\n" + e);
  });
};

edit

This is my latest javascript error, after replacing the google init with the ionic init. I understand what's happening but I don't know where I should move that function declaration to. I moved it inside the init but it still didn't work. Should I set a timeout?

TypeError: $scope.loadLocations is not a function
    at initialize (controllers.js:179)
    at Object.ionic.Platform.ready (ionic.bundle.js:2120)
    at new <anonymous> (controllers.js:182)
    at invoke (ionic.bundle.js:12468)
    at Object.instantiate (ionic.bundle.js:12476)
    at ionic.bundle.js:16745
    at IonicModule.controller.self.appendViewElement (ionic.bundle.js:47716)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (ionic.bundle.js:45973)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (ionic.bundle.js:45893)
    at IonicModule.controller.self.render (ionic.bundle.js:47590)

Answer 1

You don't need $scope.centerOnMe(); in initialize. If you do then compilation is inconsistent; refer to the examples and you will understand.

Also, ionic doesn't work well with DOM in certain cases.

Load map with $scope.init inside the container instead of function initialize().

This answer explains it in detail.

Another way to do it is by replacing google.maps.event.addDomListener(window, 'load', initialize); with ionic.Platform.ready(initialize);. Example here.