title: Google Maps Routing W/ AngularJS
body: <p>I have created an app that uses Google Maps, the map showed up before I did my routing. But after routing it wont display. Here is my code for the app. <br>
  <strong>JS:</strong> <br>
  <strong>search-controller.js</strong></p>
  
  <pre><code>(function() {
    searchController.$inject = ['$scope'];
    function searchController($scope) {
  
      $scope.ASiteLocs = [There Is Code In here that is too long and irrelevant to the map];
      $scope.SSiteLocs = [""];
      $scope.SiteLocs = $scope.SSiteLocs.concat($scope.ASiteLocs);
  
      angular.forEach($scope.SiteLocs, function(location) {
        var clength = location.Point.coordinates.length;
        if (location.Point.coordinates.substring(clength - 2, clength) === ",0") {
          location.Point.coordinates = location.Point.coordinates.substring(0, clength - 2).split(",");
          Lat = location.Point.coordinates[0];
          Lon = location.Point.coordinates[1];
          Com = ",";
          location.Point.coordinates = Lon.concat(Com, Lat);
        }
  
        angular.forEach($scope.SSiteLocs, function(object) {
          object.carrier = 'Sprint';
        });
        angular.forEach($scope.ASiteLocs, function(object) {
          object.carrier = 'AT&amp;T';
        });
  
      });
    }
  
    angular.module("siteLookUpApplication").controller('searchController', searchController);
  }());
  </code></pre>
  
  <p><strong>map-controller.js</strong></p>
  
  <pre><code>(function() {
  
    mapController.$inject = ['$scope', '$routeParams'];
    function mapController($scope, $routeParams) {
      function initialize() {
        var mapOptions = {
          center: site.Point.coordinates,
          zoom: 5
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
          mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  
      // Save the locationName in the url to the scope
      $scope.locationName = $routeParams.locationName;
    }
  
    angular.module("siteLookUpApplication").controller("mapController", mapController);
  }());
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>(function() {
    angular.module("siteLookUpApplication", ["ngRoute"]);
  
    angular.module("siteLookUpApplication").config(function($routeProvider) {
      $routeProvider
        .when("/search", {
          templateUrl: "search.html",
          controller: "searchController"
        })
        .when("/map/:locationName", {
          templateUrl: "map.html",
          controller: "mapController"
        })
        .otherwise({
          redirectTo: '/search'
        });
    });
  }());
  </code></pre>
  
  <p><strong>HTML:</strong><br>
  <strong>map.html</strong></p>
  
  <pre><code>&lt;style&gt;
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map-canvas { height: 100%
    background:#fff;}
  &lt;/style&gt;
  &lt;div&gt;
      &lt;div&gt;&lt;a ng-href="#/search"&gt;Back To Search&lt;/a&gt;&lt;/div&gt;
      &lt;p&gt;Map for {{locationName}}&lt;/p&gt;
      &lt;div id="map-canvs"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="siteLookUpApplication"&gt;
    &lt;head&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" href="style.css" type='text/css'/&gt;
      &lt;script data-require="angular.js@*" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.js"&gt;&lt;/script&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"&gt;&lt;/script&gt;
      &lt;script data-require="google-maps@1.0.0" data-semver="1.0.0" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
      &lt;script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;script src="map-controller.js"&gt;&lt;/script&gt;
      &lt;script src="search-controller.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0wdLb9-Os4YVxn_JR2sY08xEN-1aJkMM"&gt;&lt;/script&gt;
      &lt;title&gt;Site ID&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body link="white" vlink="white"&gt;
      &lt;div class="text-center"&gt;
        &lt;h1&gt;Site Finder&lt;/h1&gt;
        &lt;div id="map-canvas"&gt;&lt;/div&gt;
        &lt;div ng-view&gt;&lt;/div&gt;      
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>search.html</strong></p>
  
  <pre><code>&lt;div&gt;
        &lt;input type="text" ng-model="search" border="1" placeholder="Please enter site name..." /&gt;
  
        &lt;table border="1" width="100%"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;td&gt;Name&lt;/td&gt;
              &lt;td&gt;Carrier&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr ng-repeat="site in SiteLocs | filter : search"&gt;
              &lt;td&gt;
                &lt;a ng-href="#/map/{{site.name}}"&gt;  
                {{site.name}}
                &lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;
                {{site.carrier}}
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is a plunk with my project if that is easier: <a href="http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=info" rel="nofollow noreferrer">http://plnkr.co/edit/AiVc6nccqke8Jluonpxl?p=info</a></p>