CODEWITHSUNDEEP
javascriptjqueryangularjsgoogle-mapsgoogle-maps-api-3
Jaskaye17
Jaskaye17

Reputation: 637

Issue loading google map with angular js

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. 

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);
 });

Solution courtesy of DMullings:

 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);
          };
      }
   }; 
 });

HTML:

<div data-ng-controller="BarsController" data-ng-init="initialize()">   
  //HTML Content Here
</div>

Upvotes: 4

Views: 1972

Answers (1)

dmullings
dmullings

Reputation: 7200

Instead of trying to run the initialize function on load event you can try using ng-init

Add the initialize function to the scope:

$scope.initialize = function(){
    //code goes here
};

Then call initialize function when the controller is initialized by angular

<div data-ng-controller="BarsController" data-ng-init="initialize()"></div>

Upvotes: 6

Related Questions