title: Issue loading google map with angular js
body: <p>I am using the following javascript to load google map into my angular.js web application. The map works fine when I am on the page and refresh; however, when I LINK TO THE PAGE from somewhere else in my application the map does not load. I believe this has something to do with the DOM listener is not registering a 'load' event, but, am not sure. I would appreciate help in solving this. </p>
  
  <pre><code>authApp.controller('BarsController', function($scope, $rootScope, BarService) {
    $scope.currentUser = Parse.User.current();
    $scope.title = $rootScope.title;
  
    function initialize(){
        var mapOptions = {
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
  
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
        $scope.map = map;
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
  
                $scope.map.setCenter(pos);
  
                //Set myLocation Pin
                var marker = new google.maps.Marker({
                    position: pos,
                    map: $scope.map,
                    title: 'My Location',
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                });
  
            }), function(error){
              console.log('Unable to get location: ' + error.message);
            };
        }
     }; 
     google.maps.event.addDomListener(window, 'load', initialize);
   });  
  </code></pre>
  
  <p>Solution courtesy of DMullings:</p>
  
  <pre><code> authApp.controller('BarsController', function($scope, $rootScope, BarService) {
    $scope.currentUser = Parse.User.current();
    $scope.title = $rootScope.title;
  
    $scope.initialize = function(){
        var mapOptions = {
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
  
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  
        $scope.map = map;
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
  
                $scope.map.setCenter(pos);
  
                //Set myLocation Pin
                var marker = new google.maps.Marker({
                    position: pos,
                    map: $scope.map,
                    title: 'My Location',
                    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                });
  
            }), function(error){
              console.log('Unable to get location: ' + error.message);
            };
        }
     }; 
   }); 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-ng-controller="BarsController" data-ng-init="initialize()"&gt;   
    //HTML Content Here
  &lt;/div&gt;  
  </code></pre>