Google Maps Wont Work in AngularJS after routing

Question

I am writing an app that has a Google Maps Embed. This Embed showed before I did some routing but now it wont work. Is this a common issue with AngularJS? If not, which I assume it isn't, can someone please explain to me what i'm doing wrong?
Here is my code:

JS:

(function() {

  mapController.$inject = ['$scope', '$routeParams'];
  function mapController($scope, $routeParams) {
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 5
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);


    $scope.locationName = $routeParams.locationName;
  }

  angular.module("siteLookUpApplication").controller("mapController", mapController);
}());

Index HTML:

    <!DOCTYPE html>
<html ng-app="siteLookUpApplication">
  <head>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" type='text/css'/>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
    <script src="app.js"></script>
    <script src="map-controller.js"></script>
    <script src="search-controller.js"></script>

    <title>Site ID</title>
  </head>

  <body link="white" vlink="white">
    <div class="text-center">
      <h1>Site Finder</h1>
      <div ng-view></div>
    </div>
  </body>
</html>

Map HTML:

<style>
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100%
  background:#fff;}
</style>
<div ng-controller="mapController">
    <div link="blue" vlink="blue"><a ng-href="#/search">Back To Search</a></div>
    <p>Map for {{locationName}}</p>
    <div id="map-canvas"></div>

Here is also a plunk of the full project if that suits you better:http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=preview
Thanks for any help!!

I'm trying to figure out what is not working. I'm diving into the plunker but I receive several errors. What I see is that the initialize() method is never call, and I see a reference to mapController() into a div that doesn't exist. Could you try to give us a more detailed comment about your specific error? — Mario Levrero, Jul 29 '14 at 15:33
The initialize is called in the domlistener under initialize() I believe, and what do you mean mapController() is referenced to a div that doesn't exist? @MarioLevrero — Ian Pennebaker, Jul 29 '14 at 15:40
And the problem with explaining the error is that no error shows in the console. The Map simply does not show up @MarioLevrero — Ian Pennebaker, Jul 29 '14 at 15:43
Using that listener will never initialize the controller. Take a look at http://stackoverflow.com/questions/13059284/window-onload-does-not-work-in-angularjs. — Mario Levrero, Jul 29 '14 at 15:46
Okay I added `ng-init="initiliaze()"` to the body tag. Still won't work. Any other ideas? @MarioLevrero — Ian Pennebaker, Jul 29 '14 at 15:52

score 3 · Answer 1 · answered Nov 10 '14 at 02:41

Rather than using google.maps.event.addDomListener to call the initialize function, you should do it the Angular way. First, add the initialize function to the scope and remove the google DomListener:

(function() {

mapController.$inject = ['$scope', '$routeParams'];
  function mapController($scope, $routeParams) {
    $scope.initialize = function() {
      var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 5
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    }

    $scope.locationName = $routeParams.locationName;
  }

  angular.module("siteLookUpApplication").controller("mapController", mapController);
}());

Then you can call initialize straight in the map-canvas div:

<div id="map-canvas" ng-init="initialize()"></div>

Google Maps Wont Work in AngularJS after routing

1 Answers1